创建一个 DIV 来获取父级宽度的剩余部分 - 并且 - 也获取父级的高度

Question

我们有这个标记：

<div class="parent">
   <div class="child-1">
      Hello World!
   </div>
   <div class="child-2">
   </div>
</div>

child-1

宽度为30%，我们需要

child-2

来获取父级宽度的剩余部分，所以我们有：

.child-1{
   width:30%;
}
.child-2{
   float: none;
   overflow: hidden;
}

而且它有效。但我们还需要

child-2

来获取父级的高度，因此我们向父级添加了 flex ：

.parent{
   display:flex
}

而且它有效。不过，

child-2

不再接受父宽度的提醒。

如果我们将

child-2

宽度定义为固定数字，例如 70%，它就可以工作。然而，对于我们正在做的脚本，我们需要它来获取父级的其余部分。

有没有办法让

child-2

获取父宽度的剩余部分 -AND- 获取父高度，而不必将其宽度定义为固定数字？

Answer 1

是的，您可以让 child-2 获取父级的剩余宽度，并获取父级的高度，而不指定固定宽度。您可以使用“flex-grow”属性来实现此目的。操作方法如下：

  .parent {
       display: flex;
    }
    
    .child-1 {
       width: 30%;
    }
    
    .child-2 {
       flex-grow: 1; /* This will make it take the remaining width */
       overflow: hidden;
    }

通过将child-2的flex-grow设置为1，它将自动扩展以填充父级的剩余宽度，同时仍保留父级的高度。这样，您不需要为 child-2 指定固定宽度，它会适应父容器中的可用空间。