web-dev-qa-db-ja.com

Flex要素はFirefoxのパーセントパディングを無視します

display:flex要素内の要素にパディングを追加しようとしています。パディングがパーセントで定義されている場合、Firefoxでは表示されませんが、pxで定義されている場合は表示されます。どちらの場合もChromeで期待どおりに機能します。

div {
    background: #233540;
}
div > div {
    color: #80A1B6;
}
.parent {
    display: flex;
}
.padded {
    padding-bottom: 10%;
}
<div class="parent">
    <div class="padded">
        asdf
    </div>
</div>

クロム：

chrome

Firefox：

Firefox

Edit：これは、親コンテナの高さに対する垂直方向の割合を解釈するというMozillaの決定が原因である可能性があります。私には夢中に思えます。 https://bugzilla.mozilla.org/show_bug.cgi?id=851379

Edit 2：はい、仕様では実際にコンテナの高さに対して解決される垂直パディングとマージンが定義されているようです。したがって、おそらくChromeは仕様を守っていないものですか？ https://drafts.c​​sswg.org/css-flexbox/#item-margins

htmlcssfirefoxflexbox
38
nvioli

https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html を参照してください

グリッド/フレックスのパーセンテージ

  • グループは、垂直方向のパーセンテージのマージンとパディングがどのように定義されるかを調べようとしました。
    • 注：CSSの上部と下部のマージンは、従来、高さではなくブロックの幅に対して解決されていました。これは、いくつかの有用な効果がありますが、一般的に驚くべきことです。もちろん、既存のレイアウトモードは引き続きそうする必要があります。
    • 以前のグループ解決はオプション2（下記）に対するものでしたが、Googleは、再考に値するアブソス行動に関する新しい情報があると感じました。
    • 議論は次の3つの解決策につながりました。
      • オプション1：常に幅に対してパーセントを解決します。
      • オプション2：グリッドとフレックスは高さに対して解決され、absposアイテムは常に幅に対して解決されます。
      • オプション3：アブソ項目を含むグリッドとフレックスは、高さに対して解決されます。他のAbsposは、幅に対して解決し続けています。
    • ストロー投票では、グループはオプション1と3にほぼ均等に分割されました。
    • マイクロソフトはオプション1に反対し、グーグルはオプション3に反対するため、議論は行き詰まり、結論に達することを期待してF2Fの間も個人的に続けられます。

https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html を参照してください。

Flexbox％フォローアップ

  • [...]まだ結論はありませんでした。

現在の Flexbox仕様 はこれについて警告しています：

flex items のマージンとパディングの割合は、次のいずれかに対して解決できます。

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

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

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

著者は flex items のパディングやマージンにパーセンテージを使用することを完全に避ける必要があります。異なるブラウザでは異なる動作をするためです。

ただし、最近ではCSS WG resolved （with 論争 ）：

両方のflexboxおよびグリッド項目の上下のマージンとパディングのパーセントは、使用可能なインライン方向に対して解決されます。

更新された 編集者の下書き をご覧ください。

40
Oriol

私にとって、これはトリックです：display：tableをdivに追加します。ただし、それが他の問題を引き起こすかどうかはわかりません。

    div {
        background: #233540;
        display: table;
    }
    div > div {
        color: #80A1B6;
    }
    .parent {
        display: flex;
    }
    .padded {
        padding-bottom: 10%;
    }
    <div class="parent">
        <div class="padded">
            asdf
        </div>
    </div>
19
Jevado

これを試して：

.padded {
    padding-bottom: 10vw;
}
7
Discotune

現在のドラフト仕様では、

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

そのため、最新のドラフトによると、Firefoxは正しくありません。

CSSWGディスカッション： https://github.com/w3c/csswg-drafts/issues/2085 仕様変更ログのリファレンス： https://drafts.c​​sswg.org/css-flexbox/# change-2017-margin-padding-percent フレックスアイテムのマージンに関する現在の仕様： https://drafts.c​​sswg.org/css-flexbox/#item-margins

2
preaction