在 Internet Explorer 中有一个问题，它不能正确地呈现与行相关的 flexbox 元素。
列似乎在两种浏览器中都能正常工作，但是......
IE 11 似乎无缘无故地缩小了行数？这意味着我可以通过将 flex: 1 0 auto(prevent shrinking) 应用到行并将 flex:1 应用到列来修复它，但不是常量代码。
在 IE 中是否有修复它，或者我做错了什么，因为 Chrome 正确地呈现它这是我当前的修复，对我来说似乎是一个 hack。
Chrome
即:
<html>
<body>
<style>
div.form {
display: block;
width: 500px;
height: 500px;
overflow-y: scroll;
}
div.container-row {
display: flex;
flex-direction: column;
background-color: white;
}
div.container-col {
display: flex;
flex-direction: row;
background-color: white;
}
div.field {
display: inline-flex;
flex: 1;
background-color: purple;
padding: 10px;
box-sizing: border-box;
}
div.value {
display: inline-flex;
flex: 1;
background-color: pink;
}
input[type=text] {
width: 100%;
padding: 10px;
}
</style>
<div class="form">
<div class="container-row">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-row">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-col">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
<div class="container-col">
<div class="field">hiiiiiiiidddsssssssdddddddd</div>
<div class="value">
<input type="text" />
</div>
</div>
</div>
</body>
</html>
fiddle :https://jsfiddle.net/e2jwc371/3/
为帮助干杯;)
最佳答案
当使用 flex: 1; 时，您不仅要设置 flex-grow 和 flex-shrink。您还将 flex-basis(元素之间的相对大小)设置为 0%。这可能就是让 IE 感到困惑的原因。
更改 flex 属性以使用自动调整大小(flex: 1 auto;)，它在 IE 中也能正常工作:
...
div.field {
display: inline-flex;
flex: 1 auto;
background-color: purple;
padding: 10px;
box-sizing: border-box;
}
div.value {
display: inline-flex;
flex: 1 auto;
background-color: pink;
}
...
更新的 JSFiddle:https://jsfiddle.net/e2jwc371/4/
关于html - Internet Explorer 中的 flexbox 列行问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31194342/