flex アイテムには flex-shrink
プロパティが設定されており、デフォルト値は 1 となっています。flex-shrink
プロパティは flex アイテムが他の flex アイテムに対してどれだけ縮小するかを示す係数です。
§ 7.1. The flex Shorthand[1]
<'flex-shrink'>
This<number [0,∞]>
component setsflex-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 to1
.
これによって 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>