我无法让
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)
在上面的例子中,所有元素在主轴上正确弯曲,div和span也在横轴上正确伸展,但是输入和文本区域在横轴上没有正确伸展.根据specification,他们应该.
我不是在寻找一种解决方法,而是想知道我做错了什么或者我在规范中遗漏的东西会阻止它工作.
解决方法
Textareas和输入标签不会自动继承flexBox的max-width属性,因为它们不是Box模型的一部分.为了使它们充当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>
