How to vertically strech child of stretched flex child

Question

I have a column flexbox container. I can stretch one of the flexbox child, but I can find how to stretch its children. See example (.flex-child-2-child and .flex-child-2-child-child should stretch vertically to fill .flex-child-2) :

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  border: 4px solid green;
}

.flex-child-1 {
  width: 100px;
  background-color: SteelBlue;
}

.flex-child-2 {
  flex: 1;
  background-color: LightSeaGreen;
}

.flex-child-2-child-child,
.flex-child-2-child {
  height: 100%;
}

.flex-child-2-child-child {
  background-color: Tomato;
  display: flex;
  width: 100%;
}
.flex-child-2-child-child > div {
  flex: 0 1 auto;
  border: 1px solid yellow;
  height: 100%;
  width: 100px;
}
.flex-child-2-child-child > div + div {
  flex: 1;
}

<div class="flex-child flex-child-1">
  Test
</div>
<div class="flex-child flex-child-2">
  <div class="flex-child-2-child">
    <div class="flex-child-2-child-child">
      <div>Hello</div>
      <div>Word!</div>
    </div>
  </div>
</div>

I could use height instead of min-heighton body, but then long content would overflow out of body

body {
  display: flex;
  height: 100vh;
  flex-direction: column;
  border: 3px solid green;
}

.flex-child-1 {
  width: 100px;
  background-color: SteelBlue;
}

.flex-child-2 {
  flex: 1;
  background-color: LightSeaGreen;
}

.flex-child-2-child-child,
.flex-child-2-child {
  height: 100%;
}

.flex-child-2-child-child {
  background-color: Tomato;
  display: flex;
}

.flex-child-2-child-child>div {
  flex: 0 1 auto;
  border: 1px solid yellow;
  width: 100px;
}

.flex-child-2-child-child>div+div {
  flex: 1;
}

<div class="flex-child flex-child-1">
  Test
</div>
<div class="flex-child flex-child-2">
  <div class="flex-child-2-child">
    <div class="flex-child-2-child-child">
      <div>Hello</div>
      <div>Word!
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
      </div>
    </div>
  </div>
</div>

score 1 · Accepted Answer · answered Nov 26 '21 at 05:06

1

Add flex: 1; display: flex; flex-direction: column; to .flex-child-2

And

display: flex; flex-direction: column; flex: 1; to .flex-child-2-child-child, .flex-child-2-child to stretch the elements

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.flex-child-1 {
  width: 100px;
  background-color: SteelBlue;
}

.flex-child-2 {
  flex: 1;
  background-color: LightSeaGreen;
  display: flex;
  flex-direction: column;
}

.flex-child-2-child-child,
.flex-child-2-child {
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-child-2-child-child {
  background-color: Tomato;
}

<div class="flex-child flex-child-1">
  Test
</div>
<div class="flex-child flex-child-2">
  <div class="flex-child-2-child">
    <div class="flex-child-2-child-child">
      Hello Word!
    </div>
  </div>
</div>

answered Nov 26 '21 at 05:06

Nitheesh

19,238
3
22
49

The issue I have is that in the final project, one of the children already has `display:flex; flex-direction: row`, I am editing my question to reflect it. – Laurent Nov 26 '21 at 05:33
Please update the questions with real issue scenario so that this can be checked. – Nitheesh Nov 26 '21 at 05:35
It's done I edited it – Laurent Nov 26 '21 at 05:42
All right, the "flexbox row child" should only get an additional `flex: 1` and it works. – Laurent Nov 26 '21 at 05:48
Please approve the ansr if tis works for you. – Nitheesh Nov 26 '21 at 06:40

How to vertically strech child of stretched flex child

1 Answers1