web-dev-qa-db-ja.com

FirefoxとEdgeのフレックスアイテムでパーセンテージのパディング/マージンが機能しないのはなぜですか？

フレックスボックス内に正方形のdivが必要です。だから私は使用します：

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50%;
}
<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

これはChromeで正常に機能します。しかし、Firefoxでは、親は1行だけに絞り込みます。

Firefoxでこれを解決するにはどうすればよいですか？バージョン44を使用しています。

https://jsbin.com/lakoxi/edit?html,css でコードを表示することもできます。

htmlcssfirefoxflexbox
15
Yiou

2018アップデート

flexbox仕様が更新されました。

4.2。フレックスアイテムのマージンとパディング

ブロックボックスのようなフレックスアイテムのマージンとパディングのパーセンテージは、それらを含むブロックのインラインサイズに対して解決されます。左/右/上/下のパーセンテージはすべて、水平書き込みモードで含まれているブロックの幅に対して解決されます。

元の回答-2018年より前にリリースされたFFおよびEdgeバージョンに適用されます

flexbox仕様から :

作成者は、フレックスアイテムのパディングやマージンにパーセンテージを使用しないでください。ブラウザによって動作が異なるためです。

ここにいくつかあります：

4.2。フレックスアイテムのマージンとパディング

フレックスアイテムのマージンとパディングのパーセンテージは、次のいずれかに対して解決できます。

  • 独自の軸（左/右のパーセンテージは幅に対して解決され、上/下のパーセンテージは高さに対して解決されます）、または、
  • インライン軸（左/右/上/下のパーセンテージはすべて幅に対して解決されます）

ユーザーエージェントは、これら2つの動作のいずれかを選択する必要があります。

注：この差異はひどいものですが、世界の現在の状態を正確に捉えています（実装間のコンセンサスはなく、CSSWG内のコンセンサスもありません）。ブラウザーが動作の1つに収束し、その時点で仕様が修正されることがCSSWGの意図です。

19
Michael_B

Michael_Bの回答 に加えて、考えられる回避策があります。

パーセントを使用する場合、それをビューポートの幅に関連付けることがよくあります。そのことを念頭に置いて、ビューポートの単位vw/vhは同様に機能する（レスポンシブ）ため、オプションにすることができます。

スタックスニペット

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50vw;
}
<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>

コメントに基づいて更新

正方形が必須で、ビューポートユニットまたはスクリプトを使用できない場合は、ダミー画像を使用する別のトリックがあります。

注：イメージとして、SVGまたはBase64をdatauriとして使用して、サーバーへの余分なラウンドトリップを節約できます

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
}
.inner img {
  display: block;
  width: 100%;
  visibility: hidden;
}
<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/10" alt="">
  </div>
</div>
4
LGSon