7

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とスパンも交差軸で正しく伸びていますが、入力領域とテキスト領域は交差軸で正しく伸びていません。仕様によると、そうすべきです。

私は回避策を探しているのではなく、私が間違っていることや、これが機能しない原因となる仕様に欠けていることがあるかどうかを知りたいと思っています。

4

2 に答える 2

0

テキストエリアと入力タグは、ボックス モデルの一部ではないため、フレックスボックスの 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-22T16:49:34.083 に答える
0

@ebidel が指摘したように、これはブラウザー実装のバグであることが判明し、最近のリリースでは問題ではなくなりました。

于 2015-04-14T23:56:52.153 に答える