Как растянуть дочерний элемент на всю высоту родителя (2)?

Question

Нужно растянуть блок с цифрой 1 на такую же высоту, как и блок, содержащий цифры 2, 3 и 4.

Родитель блока .label (с цифрой 1) имеет такую же высоту, как и блок, содержащий цифры 2, 3 и 4. Но сам .label с цифрой 1 имеет дефолтную высоту. Как это можно изменить?

Если ставлю .label высоту 100% -- блок некорректно растягивается, получая дополнительную, ненужную высоту.

JSFiddle: https://jsfiddle.net/5qywfm6n/

.list {
    display: flex;
}

.parent {
    flex-grow: 1;
}

.label {
    background: #999;
    text-align: center;
}

<div class="list">
<div class="parent">
    <div class="label">1</div>
</div>
<div class="parent">
    <div class="label">2</div>
    <div class="list">
        <div class="parent">
            <div class="label">3</div>
            <div class="list">
                <div class="parent">
                    <div class="label">4</div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

.list {
  display: flex;
}

.parent {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.label {
  flex-grow: 1;
  background: #999;
  text-align: center;
  margin:1px;
}

Answer 2

.list {
  display: flex;
}

.parent {
  flex-grow: 1;
}

.label {
  background: #999;
  text-align: center;
}

.label__height {
  height: 100%;
}

<div class="list">
  <div class="parent">
    <div class="label label__height">1</div>
  </div>
  <div class="parent">
    <div class="label">2</div>
    <div class="list">
      <div class="parent">
        <div class="label">3</div>
        <div class="list">
          <div class="parent">
            <div class="label">4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как растянуть дочерний элемент на всю высоту родителя (2)?

Ответы (2 шт):