フレックスボックスの親ブラウザの子要素よりサイズが小さい

Question

親が狭い画面の子より小さいのはなぜですか？

スニペットを参照してください。ブラウザを（幅方向に）サイズ変更すると、ピンク色のボックスより小さくなります。スクロールバーが表示されます。ページの右側にスクロールし、緑色の背景がピンク色の領域よりも小さく、右側に白い点があることに注意してください。

​​

だから、いくつかの質問：

1. なぜそれが起こるのでしょうか？

2. にはどうすればブラウザがをリサイズされたときに親に明示的な幅を設定（または他のどこ）かoverflow:hiddenを使用してずにピンクボックス/ DIVよりも小さくなってから、親のdivの緑の背景を防ぐのですか？

3. この問題のフレキシブルソリューションはありますか？

おかげで、

トーマス

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 

 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

Answer 1

1. あなた.parentは、通常のブロック要素（フレックスはまた、ブロックレベルのコンテナであるので、それは、たまたま）、それはで初期化されます210、あなたの場合はビューポートの幅です。つまり、右にスクロールすると、divの幅がスクロール可能領域全体よりも小さいため、空白が表示されます。

2. .parentをインライン要素に設定すると、子要素の幅に応答します。

3. はい、.parentでdisplay: inline-flex;を使用してください。

.parent { 
 
    height: 400px; 
 
    width: 100%; 
 
    background-color: green; 
 
    display: inline-flex; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

W3Schoolsの上display propertyを参照してください。

Answer 2

フレックスアイテムは、デフォルトでコンテンツのサイズより小さくすることはできません。したがって、親が縮小できる間は、フレックスアイテムはテキストの長さを超えて縮小することはできません。これにより、オーバーフローが発生し、その結果、下の空白の列が生成されます。

フレックスアイテムの初期設定はmin-width: autoです。各アイテムがコンテナ内に収まるように、min-width: 0に切り替えます。今ピンクの箱はもうコンテナをオーバーフローされていません

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0; /* NEW */ 
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>

。

ただし、テキストはピンクのボックスをあふれています。

質問はテキストの動作を指定しませんが、ここでは一つの可能​​な解決策があります：

.parent { 
 
    height: 400px; 
 
    background-color: green; 
 
    display: flex; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background-color: pink; 
 
    padding: 10px; 
 
    min-width: 0;   /* NEW */ 
 
    text-overflow: ellipsis; /* NEW */ 
 
    white-space: nowrap;  /* NEW */ 
 
    overflow: hidden;  /* NEW */  
 
}

<div class="parent"> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
    <div class="item">looooooooooooooooooooooooooooong</div> 
 
</div>