Skip to main content
Commonmark migration
ソース リンク

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>

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>

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>

ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

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>