CSS flexbox子高度100％

问题描述

我试图填充flexbox的flex项目的水平空间。

I'm trying to fill the horizontal space of a flex item inside a flexbox.

.container {
  height: 200px;
  width: 500px;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

flex-2-child doesn'除了在以下两种情况下填充所需的高度：

The flex-2-child doesn't fill the required height except in the two cases where:

1. flex-2的高度为100％项目默认为100％+在Chrome中显示错误）


2. flex-2-child的位置绝对不方便

这不适用于当前版本的chrome和firefox，也不适用于chrome canary，但在firefox nightly工作正常

This doesn't work on the current version of chrome and firefox nor on chrome canary, but works fine on firefox nightly

推荐答案

我已经回答了类似的问题。

I have answered a similar question here.

我知道你已经说过 position：absolute; 是不方便，但它工作。有关修复调整大小问题的详情，请参阅下文。

I know you have already said position: absolute; is inconvenient but it works. See below for further information on fixing the resize issue.

另请参阅。滚动问题。

See this answer for more information on the scrolling issue.

这篇关于CSS flexbox子高度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！