IE 11 flexbox子宽度不考虑内容（Safari也是如此）
Gre*_*orp 8 html css internet-explorer overflow flexbox
我有一个奇怪的错误，似乎一直keep绊绊，我想知道这里实际发生了什么。我有一个带有两个子div（flex：1）的flexbox容器（行包装）。当我有一个我不想换行的标题（空格：nowrap）时，IE 11的div不尊重其宽度，而是缩小到小于标题宽度。这似乎在Chrome中可以正常使用，但Safari和IE似乎不尊重标题的宽度。这里发生了什么？
这是js bin：https : //jsbin.com/bowodiz/edit?css，输出
为了方便起见，我在下面放置了主要样式和标记。
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行为：
代替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>- 解决了我的问题，并添加了速记：`flex：1 1 0％;`。IE的末尾需要％（否则它将无法识别该值并忽略它）。 (2认同)