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

问题描述

我需要拉伸黄色孩子来填充父母的所有高度.没有设置父级高度.父级的高度应取决于蓝色子级文本.https://jsfiddle.net/7vaequ1c/1/

<div style='background-color: yellow;height: 100%;宽度:20px'>
<div style='background-color: blue'>一些<br>酷<br>文本

解决方案

在使用 Flexbox 时，主要的错误是开始使用 height: 100% .

在很多情况下，我们已经习惯了这一点，但当涉及到 Flexbox 时，它往往会破坏它.

解决方法很简单，把height: 100%去掉，就可以自动运行了.

这样做的原因是对于 row 方向上的 flex item(默认)，align-items 控制垂直行为，并且因为它的默认值是 stretch，所以它按原样工作.

堆栈片段

<div style='background-color:yellow;宽度:20px'>
<div style='background-color: blue'>一些<br>酷<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 child 以填充容器的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！