如何设置孩子相对于其弹性成长的父母的身高？

Posted 2023-03-07

【中文标题】如何设置孩子相对于其弹性成长的父母的身高？

【英文标题】：How to set a child's height relative to its flex-grown parent?

【发布时间】：2016-07-30 22:47:10

【问题描述】：

在以下示例中，使用 flex-box 布局，我需要黑框的高度为蓝框高度的 50%。 蓝色框的样式为flex-grow: 1，因此它占据了红色框内的所有剩余空间。

是否甚至可以使用 flex-box 布局来做到这一点？ 如果没有，有没有其他纯 CSS 没有表格布局的方法？

* box-sizing: border-box
div padding: 5px; border: 1px solid red ; display: flex 
col1 border: 1px solid green
col2 flex-grow: 1; border: 1px solid blue; padding: 10px; margin-left: 5px
item display: inline-block; border: 1px solid black; width: 30% ; height: 50%

<div>
<col1>
Content
<br><br><br><br><br>
of
<br><br><br><br><br>
this
<br><br><br><br><br>
column
</col1>
<col2>
<item>
Height must be 50% of parent's
</item>
<item>
Height must be 50% of parent's
</item>
<item>
Height must be 50% of parent's
</item>
</col2>
</div>

【参考方案1】：

您可以在 parent 上创建伪元素并在其上使用 flex: 1，这样它会占用一半的高度，另一半会占用 child 元素

* 
  box-sizing: border-box;

body,
html 
  margin: 0;
  padding: 0;

.content 
  display: flex;
  border: 1px solid black;
  padding: 10px;

.parent 
  flex-grow: 1;
  display: flex;
  padding: 10px;
  flex-direction: column;
  border: 1px solid blue;

.random 
  padding: 20px;
  margin-right: 20px;
  border: 1px solid green;

.parent:after 
  content: '';
  flex: 1;

.child 
  flex: 1;
  border: 1px solid red;

<div class="content">
  <div class="random">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <div class="parent">
    <div class="child">asd</div>
  </div>
</div>

【讨论】：

您将外框的高度设置为100vh。我需要动态的高度。

我忘了提一个小细节。蓝盒子里面应该有几个黑盒子。我更新了问题。

@NenadVracar，黑框应该像内联块一样水平流动。