代码之家 › 专栏 › 技术社区 › Return-1

孩子得到100%的父母,这是灵活的

flexbox css3 css

0

Return-1 · 技术社区 · 6 年前

我有以下设置

<div class="a">
    <div class="b">
     Some content
    </div>
</div>

对于CSS

.a{
  flex-grow:1;
  overflow:auto;
}

.b{
  height:100%;
}

我试图使内部的DIV为父级的100%高度,其高度是使用 flex-grow 但我目前的代码似乎不起作用。如果使用flex确定父级的大小,是否可以实现?

谢谢你一帮

2 回复 | 直到 6 年前

1

3

Temani Afif 6 年前

a b

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
  border: 1px solid red;
}

.a {
  flex-grow: 1;
  display: flex;
  border: 1px solid green;
}

.b {
  border: 1px solid;
}

<div class="container">
  <div class="a">
    <div class="b">
      Some content
    </div>
  </div>
</div>

2

-1

Deepak 6 年前

<div class="a">
<div class="b">
 Some content
</div>
<div class="b">
 Some content
</div>
<div class="b">
 Some content
</div>