【X方向の横並びを綺麗に】スクロール表示flex-shrink: 0;

ウェブデザインでX方向にコンテンツを横並びに配置する際には、一般的にFlexboxを活用します。
その中でも、子要素の大きさを調整する際に重要となる、flex-shrinkプロパティの使用方法を紹介します。

以下の例では、子要素が指定のWidth通りに反映されません。

<div id="parent">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>

#parent {
  display: flex;
  align-items: center;
  overflow-x: scroll;
  width: 100%;
  background: #000;
 height: 400px;
}
.items {
  height: 300px;
  width: 300px;
  background: #fff;
  color: #000;
  margin: 0 1rem;
}

以上の例では、親要素（#parent）に子要素（.items）がピッタリ収まるように表示されておりwidth: 500pxでは表示されてません。

これを防ぐには、flex-shrink: 0; を指定します。

<div id="parent">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>

#parent {
  display: flex;
  align-items: center;
  overflow-x: scroll;
  width: 100%;
  background: #000;
 height: 400px;
}
.items1 {
  height: 300px;
  width: 300px;
  background: #fff;
  color: #000;
  margin: 0 1rem;
  flex-shrink: 0; /*追加*/
}

flex-shrink: 0; を指定することで、子要素が縮小されるのを防ぎ、意図したレイアウトを維持することができます。これにより、横並びのレイアウトで隣り合う要素同士が崩れるのを防ぎ、きれいに整列させることが可能です。特に、X方向に要素を並べユーザーにスクロールしてもらいたい時には、有効です。