css3“新”样式的flexbox无法在chrome中拉伸textarea
Posted
技术标签:
【中文标题】css3“新”样式的flexbox无法在chrome中拉伸textarea【英文标题】：css3 "new" style flexbox fails to stretch textarea in chrome 【发布时间】：2012-10-24 20:11:00 【问题描述】：我无法让 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，他们应该。
我不是在寻找解决方法，而是想知道我是否做错了什么，或者我在规范中遗漏了什么会阻止它工作。
【问题讨论】：
对于文本区域，“rows”和“cols”都是强制属性。我想知道布局是否不起作用，因为 HTML（技术上）无效，但添加它们似乎不起作用（参见：jsfiddle.net/nKzhk/20）。 最新的 Canary (25.0.1317.0 Mac) 似乎具有所需的行为。我怀疑这是自稳定版本以来已修复的问题。 @ebidel - 看起来你是对的，它实际上是一个浏览器实现错误，我已经在我的机器上用 Canary 确认（今天发布的版本再次不同，但仍然是错误的）。添加您的评论作为答案，我会为您标记。 【参考方案1】：Textareas 和 input 标签不会自动继承 flexbox 的 max-width 属性，因为它们不是盒子模型的一部分。为了让它们充当 div，您需要将它们包装在 div 中并赋予它们 100% 的宽度。这适用于当前版本的 Chrome 和 Canary。
http://jsfiddle.net/nKzhk/29/
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>
【讨论】：
【参考方案2】：正如@ebidel 所指出的，这是一个浏览器实现错误，在最近的版本中不再是问题。
【讨论】：
以上是关于css3“新”样式的flexbox无法在chrome中拉伸textarea的主要内容，如果未能解决你的问题，请参考以下文章
css3中的display:-moz-box是啥意思?是火狐中的啥样式？
CSS3 Flexbox：显示：box vs. flexbox vs. flex
CSS3 Flexbox：显示：box vs. flexbox vs. flex