html5 – css3“新”样式flexbox无法在chrome中拉伸textarea

我无法让 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.

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>

html5 – css3“新”样式flexbox无法在chrome中拉伸textarea

解决方法

猜你在找的HTML5相关文章