CSS3「新」的風格Flexbox的失敗中鉻

我遇到麻煩CSS3靈活的盒子佈局模型中鉻的最新，例如工作伸展的textarea：CSS3「新」的風格Flexbox的失敗中鉻

<!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，他們應該。

我不是在尋找解決方法，而是想知道是否有某些我在做錯的事或者我在規範中錯過了某些東西，這些東西會阻止它工作。

來源

2012-11-05 CamM

對於textarea，「rows」和「cols」都是強制屬性。我想知道，如果佈局不起作用，因爲HTML（技術上）是無效的，但添加它們似乎沒有奏效（請參閱：http://jsfiddle.net/nKzhk/20/）。 – gerrod

看來最新的金絲雀（25.0.1317.0 Mac）具有所需的行爲。我懷疑這是穩定版本以來已經解決的問題。 – ebidel

@ebidel - 看起來像你的正確，它實際上是一個瀏覽器實現的bug，我已經在我的機器上用Canary進行了確認（並且今天發佈的版本不同了，但仍然是錯誤的）。添加您的評論作爲答案，我會標記它給你。 – CamM

正如@ebidel指出，這竟然是一個瀏覽器實現的bug，並且不再在最近發佈的一個問題。

來源

2015-04-14 23:56:52 CamM

Textareas和輸入標記不會自動繼承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>

來源

2012-11-22 16:49:34 2ne

CSS3「新」的風格Flexbox的失敗中鉻

回答

相關問題