Set elements height to follow sibling height in display flex row

Question

I have the following structure in my project:

<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>

I have the following restrictions with this structure:

• container class must be display flex and be on column mode
• super-child class must be display flex and be on row mode
• uneditable class does cannot receive any styling at all, only that they have height and width 100%

What i'm trying to do is style this structure so that class A has a dominating height of over B, that is, if A height grows, B will have more height to match A's, if A is smaller, B will have the same height as A's

I've tried to set grow and shrink values in the class A and B. I can also change the displays to grid, but in my case is not preferred to.

Is there a way to make this dependence of height without using javascript to style the elements?

[UPDATE]

Found the answer to my question here. The solution was to use the following style for all children of super-child, except the first.

height: 0;
min-height: 100%;

This works due the fact that this conjunction of height definition can be understood as "have no height, just expand enough not pushing the boundaries"

Answer 1

... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :

example in a column since in a row should not be an issue

.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>

... side by side :

.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>