设置元素高度以跟随显示弹性行中的兄弟高度

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>

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

容器 class 必须显示为 flex 且处于列模式
super-child class 必须显示 flex 并且处于行模式
uneditable class 根本无法接收任何样式，只是它们的高度和宽度为 100%

我想要做的是设置此结构的样式，使 class A 的主导高度超过 B，也就是说，如果 A 身高增长，B 将有更多的身高来匹配 A 的 ，如果A更小，B会和A的

一样高

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

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

[更新]

找到了我的问题的答案。解决方案是对 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>

设置元素高度以跟随显示弹性行中的兄弟高度

Set elements height to follow sibling height in display flex row

html

css

height

display