CSS flexbox子高度100％ [英] CSS flexbox child height 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>

jsfiddle

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

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

1. flex-2的高度为100％（这很奇怪，因为flex项目有100％ ）


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.

另请参阅

Also see this jsFiddle for a demo, although I have only added webkit prefixes so open in Chrome.

你基本上有两个问题，我将分别处理。

You basically have 2 issues which I will deal with separately.

1. 获取flex-item的子元素填充高度100％
   
   
   
   
   • 在子项的父项上设置 position：relative; 。
   
   
   • 设置

   • 然后，您可以根据需要设置宽度/高度（样例中为100％）。
   


1. Getting the child of a flex-item to fill height 100%
   • Set position: relative; on the parent of the child.
   • Set position: absolute; on the child.
   • You can then set width/height as required (100% in my sample).

• 在可滚动div上放置 overflow-y：auto; 。


• 可滚动div必须指定显式高度。我的示例已经有100％的高度，但如果没有应用，您可以指定 height：0;

• Put overflow-y: auto; on the scrollable div.
• The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify height: 0;

有关详细信息，请参阅此 answer 滚动问题。

See this answer for more information on the scrolling issue.

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