🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1749閲覧

フレックスアイテムの固有アスペクト比(intrinsic aspect ratio)について

Lhankor_Mhy

総合スコア36930

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/22 09:51

編集2021/01/23 12:12

前提・実現したいこと

フレックスアイテムのアスペクト比について、Chrome と Firefox で振る舞いが異なるようです。
画像などの置換要素のフレックスアイテムがflex-growによって伸長した場合、交差軸は置換要素のアスペクト比を参照して引き延ばされると理解していましたが、Chrome ではそのようになっていませんでした。しかし、width: autoではない値をアイテムに指定すると、アスペクト比を参照するようです。

そこで以下の2点を質問いたします。

  • どちらの動作が正しいのでしょうか
  • 仕様書の記述はどのようになっているのでしょうか

推測でも構いませんので、ご回答よろしくお願いいたします。
なお、回避方法についての質問ではありません(そちらは解決しています)ので、予めご了承ください。

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

Firefoxの場合
イメージ説明

Chromeの場合
イメージ説明

該当のソースコード

サンプル

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/03/05 15:29 編集

cssのコードついて、}後の行にスペースがなくて見づらいです
Lhankor_Mhy

2021/03/06 00:23

あー、わかりました。 ユーザー名変えたんですね。失礼しました。
Lhankor_Mhy

2021/03/06 00:24

あー、コメントも編集したんですね。了解です。
guest

回答1

0

自己解決

Chrome 88 で Firefox と同様の表示になったことが確認できました。
おそらく、Chrome 88 でaspect-ratioプロパティが有効になったことに伴う変更だと思われます。
CSS aspect-ratio property - Chrome Platform Status

つまり、Chrome のバグだったのだろうと思います。

投稿2021/01/25 07:26

Lhankor_Mhy

総合スコア36930

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問