liにwidth100%をつけた時親要素の幅に対して１００％と見た目上ならないのはなぜか

Question

   <ul>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>

ul {
  display: flex;
  background: #333;
  margin: 0;
  padding: 0
}

li {
  background: #999;
  width: 100%
}

親要素に１００％の幅をもたせたら、　li要素は画面右に飛び出すと思うのですが。しっかり親の幅にli要素が収まっているのはどういうことなのでしょうか。
ちなみにwidthを２００％４００％などとしてもしっかり治りました。

Comments

[maisumakun]

あくまで実験的にやってみただけでしょうか？それとも、あるレイアウトを作りたくて意図的に実行したものでしょうか？

Answer 1

親要素に１００％の幅をもたせたら、　li要素は画面右に飛び出すと思うのですが。

flexのデフォルト値では縮んで幅を合わせるというようになっていますので、flex-wrapのかかっていない親要素の中では、（中身の自然な幅に収まりきらなくならない限り）全部が1行に収まるように縮みます。

アイテムは width および height プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "flex: 0 1 auto" と同等です。（MDNより）