widthを指定しているが、ブラウザの画面幅を変更した際、指定したwidthより小さくなる

Question

ブロック要素に対してwidth(固定値(px指定))を指定したのですが、ブラウザの画面幅を小さくした際、自分が指定した値よりwidthの幅が小さくなります。
（ブラウザはGoogleChromeです。）
これは、どういう仕様で小さくなってしまうのでしょうか？

コード
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

コード
ul {
  display: flex;
}
li {
  display: block;
  margin-right: 20px;
  width: 300px;
  background-color: lightblue;
}

Comments

[hatena19]

現象の再現できるコード(HTML, CSS)を追記してください。

[meg_]

具体的に説明してください。また現象を確認したブラウザは何ですか？

Answer 1

display: flex;を設定しているが原因ですね。
flexレイアウトでは、フレックスコンテナのサイズは親要素内に収まるように縮小するのが初期値です。

flex-shrink: 0; を指定すれば縮小しなくなります。

li {
  flex-shrink: 0;
  display: block;
  margin-right: 20px;
  width: 300px;
  background-color: lightblue;
}

flex-shrink - CSS: カスケーディングスタイルシート | MDN

Answer 2

ありがとうございます。納得できました。