如何使flexbox儿童的父母身高达到100％？ [英] How to make flexbox children 100% height of their parent?

查看：124
本文介绍了如何使flexbox儿童的父母身高达到100％？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在flexbox里面填充flex项目的垂直空间。

.container {height：200px;宽度：500px;显示：-moz-box;显示：-webkit-flexbox;显示：-ms-flexbox;显示：-webkit-flex;显示：-moz-flex;显示：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; flex-2-child {height：100％; background-color：red;}宽度：100％;

容器 > < div class =flex-1>< / div> < div class =flex-2> < div class =flex-2-child>< / div> < / div>< / div>

JSFiddle



flex-


  1. <$ c $ 不填充所需的高度c> flex-2 的高度为100％（这很奇怪，因为flex项目默认为100％+在Chrome中是bug）

  2. flex-2-child 有一个绝对位置，这也是不方便的

目前在Chrome或Firefox中无法正常工作。

解决方案

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

我知道你已经说过 position：absolute; 是不方便的，但它起作用。请参阅下文，了解有关解决调整大小问题的进一步信息。



另见 jsFiddle 为一个演示，但我只加入了在Chrome中打开的webkit前缀。



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


  1. 获取弹性项目的子项以填充高度100％


  2. 在Chrome中修正大小滚动怪癖


    • 在可滚动div上放置 overflow-y：auto; 。
    • 可滚动div必须具有明确的高度指定。我的示例已经有100％的高度，但是如果没有应用，您可以指定 height：0;


请参阅此回答以获取更多有关滚动问题。


I'm trying to fill the vertical 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>

And here's the JSFiddle

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

  1. flex-2 has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome)
  2. flex-2-child has a position absolute which is also inconvenient

This doesn't work in Chrome or Firefox currently.

解决方案

I have answered a similar question here.

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. 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).
  2. Fixing the resize scrolling "quirk" in Chrome
    • 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;

See this answer for more information on the scrolling issue.

这篇关于如何使flexbox儿童的父母身高达到100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆