Nested flexbox: allow intermediate container/child grow when its children get wrapped to avoid overflow

Question

With the following snippet:

#parent {
  width: 100%;
  height: 300px;
  border: solid black;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  column-gap: 20px;
}
#padding {
  height: 100%;
  flex: 1 1 auto;
  background-color: lightcoral;
}
#separator {
  height: 100%;
  width: 5px;
  background-color: grey;
  flex: 0 0 auto;
}

#content {
  height: 100%;
  flex: 1 0 none;
  border: solid blue;
}

#ladder {
  height: 100%;
  width: 100%;
  background-color: lightskyblue;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-around;
  row-gap: 5px;
  column-gap: 20px;
}

.child {
  height: 40px;
  width: 150px;
  border: solid green;
}

<div id="parent">
  <div id="padding">
  </div>
  <div id="separator">
  </div>
  <div id="content">
     <div id="ladder">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</div>

In the real application, the parent(black) div size is totally dynamic. I want the content(blue) and ladder(light blue) divs to grow horizontally when the childs(green) can't be contained in a single column. That way, child divs wouldn't be needlessly overflowed.

In the real app, the padding div could shrink almost to 0, but isn't doint it because neither content nor ladder are reclaiming the extra needed width to allocate the wrapped childs.

If I set #content {width: 500px} then, all childs can be fitted inside the blue area, but I want something dynamic that uses the minimum needed width but that can grow to allocate 1, 2 or the needed columns.

How can I achieve something like that?

PD: I have found this question, it seems to be the same problem but it was asked 6 years ago. It would be nice to know if there are newer ways to do it. Also, from this question I have tried with the writing-mode: vertical-lr; text-orientation: upright; but they totally mess with my layout (maybe because I'm using a framework, quasar).