flexboxの横幅設定がうまくいかなかったときの対応メモ

シェアする?:

flex-itemにwidthをつけたのに、全く反映されない事件が起きました。
今までは同じようなコーディングで問題なく再現出来たのに、なぜか出来ない…。

 

実際にやったコード

html

<div class=”flexbox”>
  <div class=”flex-item”>test</div>
  <div class=”flex-item”>test</div>
  <div class=”flex-item”>test</div>
  <div class=”flex-item”>test</div>
</div>

css

.flexbox{
  width: 600px;
  display: flex;

  overflow-x: auto;
}
.flex-item{
  width: 200px;
}

※簡略化したけれどこんな感じ。

div.flexboxに横スクロール機能をつけたいだけでした。
今までも同様のコーディングをしたことが何度もあったのですが、なぜか今回はうまくできませんでした。div.flex-itemのwidthは、指定した200pxにならず150pxになってしまいました。
指定を無視して、無理やり親ボックスの横幅に収まるように縮んでしまう現象でした。

 

解決法

原因はわかりませんが、めっちゃググったら見つけました。

flexboxのバグに立ち向かう(flexboxバグまとめ) - Qiita
!(https://qiita-image-store.s3.amazonaws.com/0/32596/fc70c15a-8c11-3d2c-7a85-442e1381d51e.png)flexbox使ってますか?...

 

1. アイテム潰れる問題(Safari)

  • flex-shrinkに0を指定
  • flex-basisにautoを指定(デフォ値なので、指定がなければそのままでOK)

とのことです。

私の場合は「flex-shrink: 0;」で直りました。

 

原因がわからないので、根本は解説されていませんが、
万が一同じような問題にぶつかっている人がいたら参考になるように

乱雑ですが残しておきました。

シェアする?: