css - Chrome/Safari无法填充Flex父级的100％高度

Question

我想要一个具有特定高度的垂直菜单。

每个孩子都必须填满父母的身高，并且中间对齐文本。

孩子的数量是随机的，因此我必须使用动态值。

Div .container包含随机数量的子级（.item），这些子级必须始终填充父级的高度。为此，我使用了flexbox。

为了使文本中间对齐，我使用了display: table-cell技术。但是使用表格显示需要使用高度100％。

我的问题是.item-inner { height: 100% }在webkit（Chrome）中不起作用。


有解决此问题的方法吗？
还是有一种不同的技术可以使所有.item垂直于中间对齐，以填充父级的高度？


Example here jsFiddle, should be viewed in Firefox and Chrome

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

Answer 1

解

使用嵌套的伸缩容器。

摆脱百分比高度。摆脱表属性。摆脱vertical-align。避免绝对定位。一直坚持使用flexbox。

将display: flex应用于弹性项目（.item），使其成为弹性容器。这会自动设置align-items: stretch，它告诉子级（.item-inner）扩展父级的整个高度。

重要提示：从弹性项目中删除指定的高度，此方法才能起作用。如果孩子有指定的身高（例如height: 100%），那么它将忽略来自父母的align-items: stretch。为了使stretch默认起作用，孩子的身高必须计算为auto (full explanation）。

试试看（HTML不变）：

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

jsFiddle demo



说明


  我的问题是 .item-inner { height: 100% }无法在
  webkit（Chrome）。


它不起作用，因为您使用的百分比高度与规范的传统实现方式不一致。


   10.5 Content height: the height property
  
  percent指定百分比高度。相对于生成的框的高度计算百分比
  包含块。如果包含块的高度不是
  明确指定并且该元素不是绝对定位的，该值计算为 auto。
  
  自动高度取决于其他属性的值。


换句话说，要使百分比高度适用于流入儿童，父级必须具有设定的高度。

在您的代码中，顶级容器具有定义的高度： .container { height: 20em; }

第三级容器具有定义的高度： .item-inner { height: 100%; }

但是在它们之间，第二级容器– .item –没有定义的高度。 Webkit将其视为缺少的链接。

.item-inner告诉Chrome：给我 height: 100%。 Chrome会寻找父级（ .item）供参考并作出响应：100％是什么？我什么也没看到（忽略那里的 flex: 1规则）。结果，根据规范，它应用了 height: auto（内容高度）。

另一方面，Firefox现在接受父级的flex高度作为孩子的百分比高度的参考。 IE11和Edge也接受弯曲高度。

另外，如果与 flex-grow结合使用，Chrome会接受 flex-basis作为适当的父级引用（任何数值有效（ auto不会，包括 flex-basis: 0））。但是，在撰写本文时，此解决方案在Safari中失败。

#outer {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: white;
  border: 1px solid red;
}
#middle {
  flex-grow: 1;
  flex-basis: 1px;
  background-color: yellow;
}
#inner {
  height: 100%;
  background-color: lightgreen;
}

<div id="outer">
  <div id="middle">
    <div id="inner">
      INNER
    </div>
  </div>
</div>

四种解决方案

1.在所有父元素上指定高度

可靠的跨浏览器解决方案是在所有父元素上指定高度。这样可以防止丢失链接，基于Webkit的浏览器会认为这些链接违反了规范。

请注意， min-height和 max-height是不可接受的。它必须是 height属性。

此处有更多详细信息： Working with the CSS height property and percentage values

2. CSS相对和绝对定位

将 position: relative应用于父级，将 position: absolute应用于子级。

使用 height: 100%和 width: 100%调整子项的大小，或使用偏移属性： top: 0， right: 0， bottom: 0， left: 0。

通过绝对定位，百分比高度可以在父级上没有指定高度的情况下工作。

3.删除不必要的HTML容器（推荐）

在 button附近是否需要两个容器？为什么不删除 .item或 .item-inner或两者都删除？尽管 button elements sometimes fail as flex containers，它们可以是弹性项目。考虑将 button设为 .container或 .item的子级，并删除不必要的标记。

这是一个例子：

.container {
    height: 20em;
    display: flex;
    flex-direction: column;
    border: 5px solid black
}

a {
    flex: 1;
    background: orange;
    border-bottom: 1px solid white;
    display: flex;                   /* nested flex container (for aligning text) */
    align-items: center;             /* center text vertically */
    justify-content: center;         /* center text horizontally */
}

<div class="container">
    <a>Button</a>
    <a>Button</a>
    <a>Button</a>
</div>

4.嵌套的Flex容器（推荐）

摆脱百分比高度。摆脱表属性。摆脱 vertical-align。避免绝对定位。一直坚持使用flexbox。

将 display: flex应用于弹性项目（ .item），使其成为弹性容器。这会自动设置 align-items: stretch，它告诉子级（ .item-inner）扩展父级的整个高度。

重要提示：从弹性项目中删除指定的高度，此方法才能起作用。如果孩子有指定的身高（例如 height: 100%），那么它将忽略来自父母的 align-items: stretch。为了使 stretch默认起作用，孩子的身高必须计算为 auto (full explanation）。

试试看（HTML不变）：

.container {
    display: flex;
    flex-direction: column;
    height: 20em;
    border: 5px solid black
}

.item {
    display: flex;                      /* new; nested flex container */
    flex: 1;
    border-bottom: 1px solid white;
}

.item-inner {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */
    /* width: 100%;                     <-- remove; unnecessary */
    /* display: table;                  <-- remove; unnecessary */  
}

a {
    display: flex;                      /* new; nested flex container */
    flex: 1;                            /* new */
    align-items: center;                /* new; vertically center text */
    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */
    /* vertical-align: middle;          <-- remove; unnecessary */
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>
</div>

jsFiddle