问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

IE 11 flexbox 子宽度不考虑内容（Safari 也是）

社区维基
1
新手上路，请多包涵

我有一个奇怪的错误，我似乎一直在绊倒，我想知道这里到底发生了什么。我有一个带有两个子 div (flex: 1) 的 flexbox 容器（行换行）。当我有一个我不想换行的标题时（空白：nowrap），IE 11 的包含 div 不尊重它的宽度并缩小到小于标题宽度。这似乎在 Chrome 中工作得很好，但 Safari 和 IE 似乎不尊重标题的宽度。这里发生了什么？

这是 js bin： https ://jsbin.com/bowodiz/edit?css,output

为了方便起见，我将主要样式和标记放在下面。

HTML:

 <div class="flex-container">

    <div class="left">
      <div class="heading">Here is a heading that shouldn't wrap</div>
      <div class="sub-text">This is just some content that should wrap just fine ..</div>
    </div>

    <div class="right">
      <div class="heading">Here is a heading that shouldn't wrap</div>
      <div class="sub-text">This is just some content that should wrap just fine ...</div>
    </div>

</div>

CSS（部分）：

 .flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-container > div {
  flex: 1;
}

.heading {
  white-space: nowrap;
}

期望：

所需的并排状态

所需的包装状态

IE/Safari 行为：

在此处输入图像描述

原文由 Greg Van Gorp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssinternet-explorerflexboxoverflow
阅读 554
2 个回答
得票最新
社区维基
1
✓ 已被采纳

而不是 flex: 1 使用 flex-grow: 1; flex-basis: 0; 或指定您想要的速记的所有 3 个值。如果您指定 flex-basis 确保指定一个单位。 https://jsbin.com/ketolifuhu/edit?html,css,输出

这是一篇很好的文章，涵盖了一些错误和不一致 https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

 :root {
    --dark-primary-color: #303F9F;
    --default-primary-color: #3F51B5;
    --light-primary-color: #C5CAE9;
    --text-primary-color: #FFFFFF;
    --accent-color: #FF4081;
    --primary-text-color: #212121;
    --secondary-text-color: #757575;
    --divider-color: #BDBDBD;
    --box-size: 150px;
    font-family: Roboto, 'sans-serif';
    font-size: 20px;
    letter-spacing: 1.25px;
    font-weight: 100;
    color: white;
}

body {
  background-color: #BDBDBD;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-container > div {
  flex-grow: 1;
  margin: 10px;
  box-shadow: 2px 2px 6px 1px rgba(0,0,0,.2);
  padding: 30px;
  flex-basis: 0;
}

.left {
  background-color: #3F51B5;
}

.right {
  background-color: #3F51B5;
}

.heading {
  letter-spacing: .5px;
  font-weight: 400;
  white-space: nowrap;
}

.sub-text {
  margin-top: 20px;
  font-size: 14px;
}

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
  <title>JS Bin</title>
</head>
<body>

  <div class="flex-container">

    <div class="left">
      <div class="heading">Here is a heading that shouldn't wrap</div>
      <div class="sub-text">This is just some content that should wrap just fine and I don't really care what it says, but it'll just wrap just fine and that behavior should be handled by the heading.</div>
    </div>
    <div class="right">
      <div class="heading">Here is a heading that shouldn't wrap</div>
      <div class="sub-text">This is just some content that should wrap just fine and I don't really care what it says, but it'll just wrap just fine and that behavior should be handled by the heading.</div>
    </div>

  </div>


</body>
</html>

原文由 Michael Coker 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

你应该避免使用 flex: 1 速记，因为一些旧版本的浏览器有不同的默认值，这会给你带来问题。

许多其他人提到指定 flex-basis ，但您需要指定单位。 Ie don’t write flex-basis: 0 , write flex-basis: 0% or flex-basis: 0px , otherwise some browsers won’t know how to handle the 0 value.

现在到了重点，为了避免溢出，我通常只在 flex-child 上设置 max-width: 100% 。如果 flex-child 有填充，例如 padding-left: 10px; padding-right:10px; 然后设置 max-width 到 100% 减去填充！ IE..

 padding: 0 10px;
max-width: calc(100% - 20px);

现在，如果您执行这些步骤并删除 white-space: nowrap ，那么您将摆脱错误。

原文由 Patrick Monslaup 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题