Chrome / Safari不会填充100％高度的flex父级

Question

Chrome / Safari不会填充100％高度的flex父级

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

每个孩子必须填写父母的高度并且具有中间对齐的文本。

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

Div .container包含随机数的children（.item），它们总是必须填充父级的高度。为了实现这一点，我使用了flexbox。

为了使文本链接与中间对齐，我正在使用display: table-cell技术。但使用桌面显示需要使用100％的高度。

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

1. 这个问题有解决方法吗？

2. 或者是否有一种不同的技术可以使所有.item填充父级的高度与文本垂直对齐到中间？

这里的示例jsFiddle，应该在Firefox和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

对于Mobile Safari有一个浏览器修复程序。你需要为iOS设备添加-webkit-box。防爆。display: flex;display: -webkit-box;flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;align-items: stretch;如果您正在使用align-items: stretch;父元素的属性，请height : 100%从子元素中删除它。

Answer 2

解使用嵌套的Flex容器。摆脱百分比高度。摆脱表属性。摆脱vertical-align。避免绝对定位。只需坚持使用flexbox。应用于display: flexflex项目（.item），使其成为flex容器。这会自动设置align-items: stretch，告诉child（.item-inner）扩展父级的完整高度。重要说明：从弹性项中删除指定的高度，以使此方法起作用。如果孩子指定了一个身高（例如height: 100%），那么它将忽略align-items: stretch来自父亲的身高。要使stretch默认设置起作用，子项的高度必须计算为auto&nbsp;（完整说明）。试试这个（不改变HTML）：.container {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; height: 20em;&nbsp; &nbsp; border: 5px solid black}.item {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; nested flex container */&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; border-bottom: 1px solid white;}.item-inner {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; nested flex container */&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new */&nbsp; &nbsp; /* height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <-- remove; unnecessary */&nbsp; &nbsp; /* width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<-- remove; unnecessary */&nbsp; &nbsp; /* display: table;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <-- remove; unnecessary */&nbsp;&nbsp;}a {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; nested flex container */&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new */&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; vertically center text */&nbsp; &nbsp; background: orange;&nbsp; &nbsp; /* display: table-cell;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<-- remove; unnecessary */&nbsp; &nbsp; /* vertical-align: middle;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <-- remove; unnecessary */}<div class="container">&nbsp; <div class="item">&nbsp; &nbsp; <div class="item-inner">&nbsp; &nbsp; &nbsp; <a>Button</a>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; <div class="item-inner">&nbsp; &nbsp; &nbsp; <a>Button</a>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; <div class="item-inner">&nbsp; &nbsp; &nbsp; <a>Button</a>&nbsp; &nbsp; </div>&nbsp; </div></div>jsFiddle演示说明我的问题是.item-inner { height: 100% }在webkit（Chrome）中无效。它不起作用，因为您使用的百分比高度不符合规范的传统实现。10.5内容高度：height属性百分比指定百分比高度。百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度且此元素未绝对定位，则值计算为auto。auto高度取决于其他属性的值。换句话说，对于在流入子项上工作的百分比高度，父项必须具有设置的高度。在您的代码中，顶级容器具有已定义的高度：&nbsp;.container { height: 20em; }第三级容器具有定义的高度：&nbsp;.item-inner { height: 100%; }但在它们之间，二级容器.item-&nbsp;没有定义的高度。Webkit将其视为缺失的链接。.item-inner告诉Chrome：给我height: 100%。Chrome会查找父（.item）以供参考并做出响应：100％的内容是什么？我没有看到任何东西（忽略flex: 1那里的规则）。因此，它适用height: auto（内容高度），根据规范。另一方面，Firefox现在接受父亲的弹性高度作为孩子的百分比高度的参考。IE11和Edge也接受弹性高度。此外，如果与（任何数值有效（不会），包括）一起使用，Chrome将接受flex-grow作为适当的父参考。但是，在撰写本文时，此解决方案在Safari中失败。flex-basisautoflex-basis: 0#outer {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height: 300px;&nbsp; background-color: white;&nbsp; border: 1px solid red;}#middle {&nbsp; flex-grow: 1;&nbsp; flex-basis: 1px;&nbsp; background-color: yellow;}#inner {&nbsp; height: 100%;&nbsp; background-color: lightgreen;}<div id="outer">&nbsp; <div id="middle">&nbsp; &nbsp; <div id="inner">&nbsp; &nbsp; &nbsp; INNER&nbsp; &nbsp; </div>&nbsp; </div></div>四解决方案1.在所有父元素上指定高度可靠的跨浏览器解决方案是在所有父元素上指定高度。这可以防止缺少链接，基于Webkit的浏览器认为这违反了规范。需要注意的是min-height和max-height是不能接受的。它必须是height财产。更多详细信息：&nbsp;使用CSS&nbsp;height属性和百分比值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元素有时会作为柔性容器失效，但它们可以是柔性物品。考虑让button孩子成为.container或者.item，并删除无偿加价。这是一个例子：显示代码段4.嵌套的Flex容器（推荐）摆脱百分比高度。摆脱表属性。摆脱vertical-align。避免绝对定位。只需坚持使用flexbox。应用于display: flexflex项目（.item），使其成为flex容器。这会自动设置align-items: stretch，告诉child（.item-inner）扩展父级的完整高度。重要说明：从弹性项中删除指定的高度，以使此方法起作用。如果孩子指定了一个身高（例如height: 100%），那么它将忽略align-items: stretch来自父亲的身高。要使stretch默认设置起作用，子项的高度必须计算为auto&nbsp;（完整说明）。试试这个（不改变HTML）：.container {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; height: 20em;&nbsp; &nbsp; border: 5px solid black}.item {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; nested flex container */&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; border-bottom: 1px solid white;}.item-inner {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; nested flex container */&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new */&nbsp; &nbsp; /* height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <-- remove; unnecessary */&nbsp; &nbsp; /* width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<-- remove; unnecessary */&nbsp; &nbsp; /* display: table;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <-- remove; unnecessary */&nbsp;&nbsp;}a {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; nested flex container */&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new */&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* new; vertically center text */&nbsp; &nbsp; background: orange;&nbsp; &nbsp; /* display: table-cell;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<-- remove; unnecessary */&nbsp; &nbsp; /* vertical-align: middle;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <-- remove; unnecessary */}<div class="container">&nbsp; <div class="item">&nbsp; &nbsp; <div class="item-inner">&nbsp; &nbsp; &nbsp; <a>Button</a>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; <div class="item-inner">&nbsp; &nbsp; &nbsp; <a>Button</a>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="item">&nbsp; &nbsp; <div class="item-inner">&nbsp; &nbsp; &nbsp; <a>Button</a>&nbsp; &nbsp; </div>&nbsp; </div></div>的jsfiddle