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

Question

[ikerya]

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

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

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

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

Answer 1

[Михаил]

.list {
    display: grid;
}

.parent {
    grid-row: 1;
}

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

Comments

[ikerya]

У меня все элементы теперь стали одной строкой :(

[Михаил]

ikerya, https://jsfiddle.net/bt82wn5e/

[ikerya]

Михаил, под пример из вопроса ваш код подходит, а вот когда я попробовал сделать структуру более сложной, тогда он не сработал.

Я пытаюсь вот что реализовать: https://prnt. sc/rcjyvn. Скажите, реально ли это на CSS и если да, то в какую сторону копать?

[Михаил]

копайте сюда: https://html5book.ru/css-grid

[ikerya]

Михаил, спасибо!

Answer 2

[Антон Усачев]

Comments

[ikerya]

Я бы с радостью так сделал, но у меня такая структура создаётся автоматически, и я вручную не в состоянии уследить за каждым элементом, к тому же структура может быть сложнее, чем та, которая в примере.

[Антон Усачев]

Ну, тогда, если нужен только первый элемент, нужно искать закономерность и выбирать селекторы:

Answer 3

[Pavel Pavel]

У меня при задании height: 100% .label в первом .parent'е почему-то за рамки выходит блок с цифрой 4, при том что пример такой же как ответ выше.
Можно с помощью флексов: https://jsfiddle.net/r1uwc7qp/

Comments

[ikerya]

Автор того ответа поменял className на другое :)