如何拉伸flex孩子来填充容器的高度？ [英] How to stretch flex child to fill height of the container?

问题描述

我需要伸展黄色的孩子填补父母的所有高度。没有设置父母身高。家长的高度应该依赖蓝色的儿童文字。
https://jsfiddle.net/7vaequ1c/1/

< div style ='display：flex'> < div style ='background-color：yellow; height：100％; width：20px'> < / DIV> < div style ='background-color：blue'>一些<峰; br>阴凉LT峰; br> text< / div>< / div>

解决方案

使用Flexbox时，主要的错误是开始使用 height：100％全部。

在很多情况下，我们都习惯了这种方式，但是当涉及到Flexbox时，它经常打破它。

解决方法很简单， code> height：100％，它会自动运行。

方向（默认）， align-items 控制垂直行为，默认情况下是<$ c $

Stack snippet

 < div style ='display：flex'> < div style ='background-color：yellow; width：20px'> < / DIV> < div style ='background-color：blue'>一些<峰; br>阴凉LT峰; br> 
> 

I need to stretch yellow child to fill all height of parent. Without setting parent height. Height of parent should be dependent on blue child text. https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

解决方案

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

这篇关于如何拉伸flex孩子来填充容器的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！