IE 11 flexbox 子宽度不尊重内容（Safari 也是）答案

【问题标题】：IE 11 flexbox child width not respecting content (Safari too)IE 11 flexbox 子宽度不尊重内容（Safari 也是）
【发布时间】：2017-08-23 19:44:53
【问题描述】：

我有一个奇怪的错误，我似乎一直在绊倒，我想知道这里到底发生了什么。我有一个带有两个子 div（flex：1）的 flexbox 容器（行换行）。当我有一个不想换行的标题时（空白：nowrap），包含 div 的 IE 11 不尊重它的宽度并缩小到小于标题宽度。这在 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 行为：

【问题讨论】：

标签： html css internet-explorer flexbox overflow

【解决方案1】：

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

很多其他人提到指定flex-basis，但您需要指定单位。 IE。不要写flex-basis: 0，写flex-basis: 0%或flex-basis: 0px，否则有些浏览器不知道如何处理0值。

现在进入重点，为了避免溢出，我通常只在 flex-child 上设置 max-width: 100%。如果 flex-child 有填充，例如 padding-left: 10px; padding-right:10px; 则将 max-width 设置为 100% 减去填充！即……

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

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

【讨论】：

【解决方案2】：

（投我赞成票，投我反对票...但我只是说，是什么帮助了我¯_(ツ)_/¯)

改变子元素的弹性属性

flex: auto

到：

flex: 100%   (or  1 1 100%, if you prefer)

帮我解决了问题。

顺便说一下，问题只存在于IE11下，不在Edge下。

【讨论】：

【解决方案3】：

使用 flex-grow: 1; flex-basis: 0; 代替 flex: 1 或指定所有 3 个您想要的速记值。如果您指定flex-basis，请确保您指定了一个单位。 https://jsbin.com/ketolifuhu/edit?html,css,output

这是一篇很好的文章，涵盖了一些错误和不一致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>

【讨论】：

我对 flexbugs 非常熟悉，但您的解决方案无法解决 Safari 或 IE 中的问题。它只是强制换行，不会左右出现，一旦窗口变得太小，文本就会溢出容器。请在 Chrome 中查看以查看所需的行为。
@GregVanGorp 哦，对不起，没有注意到他们不是并排的。您只需要为此指定flex-basis: 0。介意再检查一下吗？
缩小时，标题仍会流过 .left 和 .right div 的边缘，并且它现在永远不会换行。我希望包含的 div（.left 和 .right）缩小，直到它达到标题的完整大小，然后在它达到时换行。如果您查看 chrome，它会按我的预期工作，但标题在 Safari 和 IE 11 中溢出（我不想要）。
修复了我的问题，添加了简写：flex: 1 1 0%;。 IE 最后需要 % （否则它不会识别该值并忽略它）。