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になってしまいました。
指定を無視して、無理やり親ボックスの横幅に収まるように縮んでしまう現象でした。