Flex元素忽略Firefox中的填充百分比 [英] Flex elements ignore percent padding in 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：

编辑：
这可能是因为mozilla决定解释垂直百分比到父容器的高度。似乎对我疯狂。 https://bugzilla.mozilla.org/show_bug.cgi?id=851379

编辑2 ：
是的，看来规格实际上将垂直填充和边距定义为根据容器的高度，所以也许Chrome是不遵守规范的一个？
https://drafts.c​​sswg.org/css-flexbox/# item-margins

解决方案

请参阅 https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

网格/ Flex百分比

• 通过如何定义垂直百分比边界
  和paddings。
  
  
  
  
  • 注意：CSS中的顶部和底部边距传统上是根据包含块宽度而不是
    高度来解析的，有用的效果，但一般是
    令人惊讶。
  
  
  • 以前的组解析方法是选项2（下面），但
    Google认为他们有新的信息
  
  
  • 讨论了三种可能的解决方案：
    
    
    
    
    • 选项1
    
    
    • 选项2：Grid和flex解析高度，
      abspos项目总是根据宽度解析。
    
    
    • 选项3：网格和flex，包括其abspos项目，
      根据高度进行解析。 Abspos其他地方
      继续解决宽度。
    
    
  
  
  • 在稻草调查中， b选项1和3。
  
  
  • Microsoft会反对选项1和Google反对选项3，
    ，所以讨论陷入僵局，
  
  
  
  

请参阅 https://lists.w3.org/Archives/Public/www-style/ 2015Sep / 0113.html ，

Flexbox％后续

• [...]仍然没有结论。

当前的 Flexbox规范警告： / p>

flex items 可以通过以下方式解析
：

• 自己的轴


• 内嵌轴（左/右/上/下百分比全部以宽度为单位）

ul>



用户代理必须选择以下两种行为之一。




注意：但它精确地捕获了当前的
状态的世界（在实现之间没有共识，在CSSWG内没有bbb的共识）。这是CSSWG的意图浏览器
将收敛于其中一个行为，这时规范将
修改为要求。







作者应避免在电影项目，因为他们会在
不同的浏览器中获得不同的行为。

I'm trying to add padding to an element inside a display:flex element. When the padding is defined as a percent, it doesn't display in Firefox, though it does when defined in px. Both cases work as expected in 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:

Edit: This may be because of mozilla's decision to interpret vertical percentages with respect to the height of the parent container. Seems crazy to me. https://bugzilla.mozilla.org/show_bug.cgi?id=851379

Edit 2: Yes, it appears that the spec actually defines vertical padding and margin as being resolved against the container's height, so perhaps Chrome is the one not honoring the spec? https://drafts.csswg.org/css-flexbox/#item-margins

解决方案

See https://lists.w3.org/Archives/Public/www-style/2015Sep/0038.html

Grid/Flex Percentages

• The group tried to work through how vertical percentage margins and paddings are defined.
  • Note: Top and bottom margins in CSS have traditionally resolved against the containing block width instead of its height, which has some useful effects but is generally surprising. Existing layout modes must of course continue to do so.
  • Previous group resolution had been for option 2 (below), but Google felt they had new information regarding abspos behavior that merited reconsideration.
  • The discussion came down to three potential solutions:
    • Option 1: Always resolve percents against the width.
    • Option 2: Grid and flex resolve against height, and abspos items always resolve against the width.
    • Option 3: Grid and flex, including their abspos items, resolve against the height. Abspos elsewhere continue to resolve against the width.
  • In a straw poll the group was pretty evenly divided between options 1 and 3.
  • Microsoft would object to option 1 and Google to option 3, so the discussion reached an impasse and will be continued privately during the F2F in hopes of reaching a conclusion.

See https://lists.w3.org/Archives/Public/www-style/2015Sep/0113.html,

Flexbox % Follow-Up

• [...] there was still no conclusion.

The current Flexbox spec warns about this:

Percentage margins and paddings on flex items can be resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height)
• the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended to require that.

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

这篇关于Flex元素忽略Firefox中的填充百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！