Chrome 忽略列布局中的 flex-basis [重复]

Posted 2023-03-06

【中文标题】Chrome 忽略列布局中的 flex-basis [重复]

【英文标题】：Chrome ignoring flex-basis in column layout [duplicate]

【发布时间】：2016-05-05 02:40:57

【问题描述】：

我无法让 Chrome 关注 flex-direction: column 布局中 flex: 1 1 25% 的 flex-basis 部分。它在 row 布局中运行良好。

下面的 sn-p 演示了这个问题：黄色、蓝色和粉色条是 flex-basis 50px、25% 和 75%，显示在列和行的 flex 方向上。

如果您在 Firefox（或 IE11 或 Edge）中运行它，则列和行都按预期划分区域：

但是如果您在 Chrome (47) 或 Safari (9.0.3) 中运行它，左侧的列布局似乎完全忽略了 flex-basis —— 条形的高度似乎与 flex 无关-基础：

左右之间的唯一区别是flex-direction。

.container 
  width: 400px;
  height: 200px;
  display: flex;
  background: #666;
  position: relative;


.layout 
  flex: 1 1 100%; /* within .container */
  margin: 10px;
  display: flex;


.row 
  flex-direction: row;

.column 
  flex-direction: column;


.exact 
  flex: 1 1 50px;
  background: #ffc;

.small 
  flex: 1 1 25%;
  background: #cff;

.large 
  flex: 1 1 75%;
  background: #fcf;

<div class="container">
  <div class="layout column">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
  <div class="layout row">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
</div>

我尝试将height: 100% 添加到.column，这使得 Chrome 会关注 flex-basis，但会导致另一个问题——flex 变得比它的容器大：

.column 
  flex-direction: column;
  height: 100%;

我猜这是long-standing webkit bug。有没有办法解决它？ （我正在尝试创建一些通用布局组件，因此硬编码特定数量的子元素或特定像素高度是不可行的。）

[编辑] 这是一个显示一般问题的附加示例（并避免上例中的边距和总大于 100% 的问题）：

.container 
  width: 300px;
  height: 300px;
  display: flex;


.layout 
  flex: 1 1 100%; /* within its flex parent */
  display: flex;
  background: #ffc;


.row 
  flex-direction: row;

.column 
  flex-direction: column;
  height: 100%; /* attempted workaround for webkit */


.small 
  flex: 1 1 30%;
  background: #cff;

.large 
  flex: 1 1 70%;
  background: #fcf;


div 
  /* border/padding just makes divs easier to see --
     you can remove all of this without changing the problem */
  box-sizing: border-box;
  border: 1px solid #999;
  padding: 10px;

<div class="container">
    <div class="layout row">
        <div class="small">row: 30%</div>
        <div class="large layout column">
          <div class="small">row: 70%; col: 30%</div>
          <div class="large">row: 70%; col: 70%</div>
        </div>
    </div>
</div>

【问题讨论】：

可能也与Flex basis 100% in column flexbox...和this answer有关。

还尝试了一个完全避免 % heights/flex-basis 的版​​本，使用 only 纯 flex (flex-grow)。同样的问题：Firefox 根据列容器中的要求将主轴弯曲 70/30，Chrome 做自己的事情。 fiddle here

通过使用非 flex 绝对包装器（呃！）包装每个 flex 子级的可能解决方法：github.com/philipwalton/flexbugs/issues/…。问题可能是我的 .container 和 .layout.row 的孩子通过横轴拉伸（align-items: stretch flex 默认）获得他们的高度，而 webkit 不会将其视为确定的高度。

【参考方案1】：

需要考虑的三项：

大于 100% 的所有高度之和

在您的.column 布局中，您有三个弹性项目。他们的身高是75% + 25% + 50px。这本身就超过了您申请的height: 100%。这不会导致溢出，因为您已将 flex-shrink 设置为 1。

边距空间

您已为两种布局指定了margin: 10px。所以从顶部和底部边距有一个额外的 20px 高度。在.column 布局中，这确实确实会导致 Chrome 溢出。

调整那些额外的 20px，溢出就消失了：

.column 
  flex-direction: column;
  height: calc(100% - 20px);   /* new */

.container 
  width: 400px;
  height: 200px;
  display: flex;
  background: #666;
  position: relative;


.layout 
  flex: 1 1 100%; /* within .container */
  margin: 10px;
  display: flex;


.row 
  flex-direction: row;

.column 
  flex-direction: column;
  height: calc(100% - 20px);   /* NEW */


.exact 
  flex: 1 1 50px;
  background: #ffc;

.small 
  flex: 1 1 25%;
  background: #cff;

.large 
  flex: 1 1 75%;
  background: #fcf;

<div class="container">
  <div class="layout column">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
  <div class="layout row">
    <div class="exact">50px</div>
    <div class="small">25%</div>
    <div class="large">75%</div>
  </div>
</div>

百分比高度：Chrome / Safari vs Firefox / IE

Chrome / Safari 中的 flex 项目无法识别其百分比高度的原因是 Webkit 浏览器坚持对规范的更传统解释：

CSS height property

百分比 指定百分比高度。该百分比是相对于生成框的包含块的高度计算的。如果没有明确指定包含块的高度并且该元素不是绝对定位的，则该值计算为auto。

auto高度取决于其他属性的值。

换句话说，如果你想让一个元素有一个百分比高度，那么你必须在父元素上指定一个高度。

这种语言的传统解释是“高度”表示height 属性的值。尽管从语言中不清楚“高度”的确切含义，但 height 属性要求一直是主要的实现。在处理百分比值时，我从未见过min-height、max-height 或其他形式的身高对父母有效。

然而，最近，正如这个问题（以及 another one 和 another one 和 another one）中所指出的，Firefox（和 IE，显然）已经扩大了其解释范围以接受 flex 高度。

尚不清楚哪种浏览器更符合标准。

height 定义自 1998 年以来一直没有更新 (CSS2)，这无济于事。

底线，Chrome 和 Safari 根据父级的 height 属性的值解析百分比高度。 Firefox 和 IE11/Edge 使用父级计算的弹性高度。

目前，在我看来，针对此问题的最简单的跨浏览器解决方案是全面使用 height 属性来获取百分比高度。

更新：这里有更多解决方案：Chrome / Safari not filling 100% height of flex parent

【讨论】：

感谢您的指点。我添加了一个附加示例，该示例突出了我试图解决的主要问题，同时避免了您指出的前两个问题。您第三点中的链接问题非常有帮助，并引导我前往this info，了解对确定和不定弹性项目大小的不同解释。

在您修改后的布局中，为了让 Chrome 模拟 FF，您需要将 height: 100% 添加到 .row。

啊-完美，谢谢！我实际上只是将height: 100% 从.column 移动到.layout——它涵盖了列和行。所以，每当我嵌套弹性盒时，听起来就像添加一个明确的 100% 高度是神奇的咒语。