前提・実現したいこと
フレックスアイテムのアスペクト比について、Chrome と Firefox で振る舞いが異なるようです。
画像などの置換要素のフレックスアイテムがflex-grow
によって伸長した場合、交差軸は置換要素のアスペクト比を参照して引き延ばされると理解していましたが、Chrome ではそのようになっていませんでした。しかし、width: auto
ではない値をアイテムに指定すると、アスペクト比を参照するようです。
そこで以下の2点を質問いたします。
- どちらの動作が正しいのでしょうか
- 仕様書の記述はどのようになっているのでしょうか
推測でも構いませんので、ご回答よろしくお願いいたします。
なお、回避方法についての質問ではありません(そちらは解決しています)ので、予めご了承ください。
発生している問題・エラーメッセージ
該当のソースコード
html
1<div><img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=" alt=""></div> 2<div><img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=" alt=""></div> 3<div><img src="http://placehold.jp/24/eeeeee/cccccc/150x100.png?text=" alt=""></div>
css
1div{ 2 display: flex; 3 width: 300px; 4} 5img{ 6 flex-grow: 1; 7} 8div + div img{ 9 flex-basis: 150px; 10} 11div + div + div img{ 12 width: 0; 13}
試したこと
仕様書を確認しました。
In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion. However, if the box has an aspect ratio and no specified size, its content-based minimum size is the smaller of its content size suggestion and its transferred size suggestion. If the box has neither a specified size suggestion nor an aspect ratio, its content-based minimum size is the content size suggestion.
CSS Flexible Box Layout Module Level 1
transferred size suggestion
If the item has an intrinsic aspect ratio and its computed cross size property is definite, then the transferred size suggestion is that size (clamped by its min and max cross size properties if they are definite), converted through the aspect ratio. It is otherwise undefined.
CSS Flexible Box Layout Module Level 1
上記の通り、主軸方向に関してはアスペクト比を参照することが書かれていますが、交差軸の記述を見つけることができませんでした。
補足情報(FW/ツールのバージョンなど)
win10 Firefox84 Chrome87
回答1件
あなたの回答
tips
プレビュー