将元素高度设置为跟随显示弹性行中的兄弟高度[重复]

Question

我的项目中有以下结构：

<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A"><div>
    </div>
    <div class="uneditable">
      <div class="B"></div>
    </div>
  </div>
  ...
</div>

我对这种结构有以下限制：

• container 类必须是 display flex 并且是列模式
• super-child 类必须是 display flex 并且是行模式
• uneditable 类根本无法接收任何样式，只是它们的高度和宽度为 100%

我想要做的是设置这个结构的样式，以便类 A 的主要高度超过 B，也就是说，如果 A em> 高度增加，B 将有更多的高度来匹配 A 的，如果 A 更小，B 将有与A的高度

我尝试在 A 和 B 类中设置增长和收缩值。我也可以将显示更改为网格，但在我的情况下不是首选。

有没有办法在不使用 javascript 来设置元素样式的情况下使这种高度依赖？

[更新]

找到了我的问题here 的答案。解决方案是对 super-child 的所有孩子使用以下样式，除了第一个。

height: 0;
min-height: 100%;

之所以有效，是因为高度定义的这种结合可以理解为“没有高度，只是足够扩展而不突破边界”

Answer 1

...我会为此使用网格，而不是 flex 并且还要注意结束标记:)，flex 将需要一些 js 来更新高度：

列中的示例因为在一行中应该不是问题

.super-child {
  display: grid;
  grid-auto-rows: 1fr;
}
.super-child > .uneditable {
  border: solid;
}

<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A <br> AA</div>
    </div>
    <div class="uneditable">
      <div class="B"> B</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A </div>
    </div>
    <div class="uneditable">
      <div class="B"> B<br> BB</div>
    </div>
  </div>
</div>

...并排：

.super-child {
  display: flex;
}
.super-child > .uneditable {
  border: solid;
  flex:1;
  
  
  /* demo purpose to resize heights */
  overflow-y:scroll;
  resize:vertical
}

<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A <br> AA</div>
    </div>
    <div class="uneditable">
      <div class="B"> B</div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="super-child">
    <div class="uneditable">
      <div class="A">A </div>
    </div>
    <div class="uneditable">
      <div class="B"> B<br> BB</div>
    </div>
  </div>
</div>