web-dev-qa-db-ja.com

flexboxアイテムの幅は無視されます

http://jsfiddle.net/XW9Se/

width: 200px;を左側に設定しました<div>が、ブラウザインスペクターツールで表示すると、実際の幅はランダムか何かに見えます。ウィンドウのサイズに応じて変化し続けます。

なぜ幅が有効にならないのですか？

[〜＃〜] edit [〜＃〜]：width: 100%を削除しても、幅は固定されたままです。しかし、それが必要なので、#main divは残りの幅を取ります:(サイドバーを@固定幅にし、他の<div>を残りのコンテナ幅に埋める方法はありますか？width: auto;#mainは機能しません。

csscss3widthflexbox
50
Alex

.container > divの幅を削除し、flex: auto;で #main を使用します： fiddle

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}
10
Adrift

Adriftからの答えは完璧です。しかし、それをより多くするための変更flex

#left{
    flex-basis: 200px;
    flex-grow: 0;
    flex-shrink: 0;
}

そして、widthプロパティを完全に削除します。

flexは、要素の幅が200pxの不変であると言う方法です。

113
vals

#left 歌姫 min-width of 200px、仕事をする必要があります。

5
gpgekko

幅を維持する要素またはdivにdisplay: contentsを追加します。

1
Hassan Azimi

また（上記のいずれも機能しない場合）

min-widthおよびmax-widthを確認してください。それらの範囲を増やすことで、私にとって同じ問題を修正しました。

1
BoogieBill