web-dev-qa-db-ja.com

フレックスアイテムが親のサイズに制限されるのはなぜですか？

次の例を検討してください...

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
}
<div class="parent">
        <div class="child">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna. 
        </div>
</div>

...子がwidth:150%に成長し、親が左右に（水平に中央揃えされるため）成長することを期待しています。

なぜこれが起こらないのですか？

注：公式または信頼できるソースからの回答に興味があります。理想的には、動作や可能な回避策に言及しているバグや仕様を特定します。

デバッグ情報：最新のChrome、Ubuntu 17.10でこれを経験しています。まだクロスブラウザをテストしていないので、私と同じように更新します。

cssflexboxcentering
23
Andrei Gheorghiu

あなたは考慮する必要がありますflex-shrink。あなたが読むことができるように ここ ：

Flex-shrink CSSプロパティは、フレックスアイテムのフレックスシュリンクファクターを指定します。 フレックスアイテムのデフォルトサイズが大きいフレックスコンテナよりの場合、フレックスアイテムコンテナを埋めるように縮小します 。

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
  flex-shrink: 0; /* added this */
}
<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
  </div>
</div>

そして、私たちが読むことができるように ここでも ：

Flex-shrinkプロパティーはflex shrink factorを指定します。これは残りの部分と比較してflexアイテムがどれだけ収縮するかthe flex items in 負の空きスペース（1） is分散。

このプロパティは、ブラウザがflexアイテムのflex-basis値を計算する状況を処理しますそしてそれらが大きすぎることを検出flexコンテナに収まるには。 flex-shrink 正の値アイテムが縮小する値である限り、オーバーフローしないコンテナです。

したがって、flex-shrinkから0要素は縮小しないため、オーバーフローを許可します（デフォルトでは、値は1）。

（1）負の空きスペース：アイテムの自然なサイズが利用可能なスペースよりも大きいになると、負の空きスペースがあります。

28
Temani Afif