我无法让 css3 灵活的盒子布局模型在最新的 chrome 中工作，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body {
background: #FFF;
}
div.content {
position: fixed;
width: 50%;
height: 80%;
top: 10%;
left: 25%;
padding: 10px;
background-color: #FFFFFF;
box-shadow: 0px 0px 25px 5px #333333;
border-radius: 10px;
display: -webkit-flex;
-webkit-flex-flow: column;
-webkit-align-items: stretch;
}
div.content > * {
-webkit-flex: 1 1 auto;
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
border: 2px solid gray;
height:0;
}
</style>
</head>
<body>
<div class="content">
<div>
<label>label content</label>
</div>
<textarea>Text area test</textarea>
<div></div>
<input type="text" value="input field" />
</div>
</body>
</html>
(jsfiddle 的)
在上面的示例中，所有元素都在主轴上正确 flex ，div 和 span 也在横轴上正确拉伸(stretch)，但是输入和文本区域在横轴上没有正确拉伸(stretch)。根据specification ，他们应该。
我不是在寻找变通办法，而是想知道我是否做错了什么或者我在规范中遗漏了什么会阻止它工作的东西。
最佳答案
Textareas 和 input 标签不会自动继承 flexbox 的 max-width 属性，因为它们不是框模型的一部分。为了让它们充当一个 div，你需要将它们包裹在一个 div 中并给它们 100% 的宽度。这适用于当前版本的 Chrome 和 Canary。
textarea {
width: 100%;
}
<div class="content">
<div>
<label>label content</label>
</div>
<div><textarea>Text area test</textarea></div>
<div></div>
<div><input type="text" value="input field" /></div>
</div>
关于html - css3 "new"样式 flexbox 无法在 chrome 中拉伸(stretch)文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13224520/