

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

[code]

    <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>
[/code]


CC BY-SA 4.0
2020-04-16T05:49:53.070
65671
2020-04-16T11:26:49.257
2020-04-16T11:26:49.257
32986
39655
question
html css
flex アイテムで width の大きさが 100% 以上にならない


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

> ### § 7.1. The flex Shorthand[[1]](https://drafts.csswg.org/css-
> flexbox-1/#flex-property)
>
> **< '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 にすることでこの問題を解決出来ます。

[code]

    .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; /* 追記 */
    }
[/code]

[code]

    <div class="container">
      <div class="item">
        <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2020-04-16T11:26:30.740
65682
2020-04-16T11:26:30.740
2020-06-17T08:14:45.997
-1
32986
65671
answer