flexboxの子がスクロールできずにoverflowする理由は？

前提・実現したいこと

Bootstrapを使いflexで横一列にしたrowのコンテナーにおさまりきらないflexboxの子はスクロールさせてオーバーフローさせたいのですが、最初の辺りの子がオーバーフローしていてもスクロールできません

発生している問題・エラーメッセージ

該当のソースコード



<div class="container">
  <div class="row flex-nowrap justify-content-around">
    <div class="col">
      えええええ
    </div>
    <div class="col">
     えええええ
    </div>
  </div>
  <div class="row flex-nowrap justify-content-around">
    <div class="col">
      ああああ１
    </div>
    <div class="col">
      ああああ２
    </div>
    <div class="col">
      ああああ３
    </div>    <div class="col">
      ああああ４
    </div>
    <div class="col">
      ああああ５
    </div>
  </div>  
</div>

.row {
  background: red;
  margin: 20px;
  overflow: auto;
}

.col {
  border: 2px solid;
  padding: 10px;
  min-width: 250px;
  flex: 0;
}

試したこと

スクロールされるoverflowの条件をリファレンス、書籍で確認しましたが手掛かりはありませんでした

補足情報（FW/ツールのバージョンなど）

何か追加したらよいものがありましららよろしくお願いします

行動規範の内容に同意します

回答1件

ベストアンサー

空きスペースが存在せず、コンテナに flex アイテムが収まりきらない場合に、その flex アイテムは justify-self プロパティに center を指定されたときと同様に振舞います (参考)。

space-around

Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items.

また、 center を指定したとき、空きスペースが存在せず、コンテナに flex アイテムが収まりきらない場合には flex アイテムが両方向へ等しい大きさだけはみ出します (参考)。

center

Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)

代替として space-between を使うことが出来ます。今回の場合は、これに加えて ::before / ::after 疑似要素を使い両端の余白を再現する必要があります (動作確認用リンク)。

HTML
1<div class="container">
2  <div class="row flex-nowrap justify-content-between">
3    <div class="col">
4      えええええ
5    </div>
6    <div class="col">
7     えええええ
8    </div>
9  </div>
10  <div class="row flex-nowrap justify-content-between">
11    <div class="col">
12      ああああ１
13    </div>
14    <div class="col">
15      ああああ２
16    </div>
17    <div class="col">
18      ああああ３
19    </div>    <div class="col">
20      ああああ４
21    </div>
22    <div class="col">
23      ああああ５
24    </div>
25  </div>  
26</div>

CSS
1.row {
2  background: red;
3  margin: 20px;
4  overflow: auto;
5}
6
7.row::before, .row::after {
8  content: "";
9}
10
11.col {
12  border: 2px solid;
13  padding: 10px;
14  min-width: 250px;
15  flex: 0;
16}