1

Flexbox を使った際に width: 200% で Flexbox の 2 倍の大きさのアイテムができると思いましたが違いました。何故こうなるのか教えてください、よろしくお願いします。

<div style='width: 50vw; margin: 0 auto; display: flex; justify-content: center;  align-items: center;border: 1px solid black;'>
  <div style='border: 1px solid black; width: 150%;
  height: 100%; overflow: auto;'>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
    </p>
  </div>
</div>

1 件の回答 1

1

flex アイテムには flex-shrink プロパティが設定されており、デフォルト値は 1 となっています。flex-shrink プロパティは flex アイテムが他の flex アイテムに対してどれだけ縮小するかを示す係数です。

§ 7.1. The flex Shorthand[1]

<'flex-shrink'>
This <number [0,∞]> component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1.

これによって flex アイテムのサイズがコンテナのサイズまで縮められるため、 flex アイテムははみ出しません。このため、 flex-shirink プロパティの値を 0 にすることでこの問題を解決出来ます。

.container {
  width: 50vw;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

.item {
  border: 1px solid red;
  width: 150%;
  height: 100%;
  overflow: auto;
  flex-shrink: 0; /* 追記 */
}
<div class="container">
  <div class="item">
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
  </div>
</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。