Как сделать так, чтоб два первых элемента в потоке регулировали ширину нижнего эл-та?

Question

Мне надо, чтоб ширина нижнего элемента была равна ширине двух верхних. Как такое лучше всего сделать?

* {
  margin: 0;
  padding: 0;
}

.wrapper_blocks {
  display: flex;
  flex-direction: column;
}

.block_left {
  display: inline-block;
  width: 35vw;
  height: 5.7vw;
  min-width: 265px;
  min-height: 50px;
  background: red;
  margin: 0px 10px 5px 0px;
}

.block_right {
  display: inline-block;
  width: 35vw;
  height: 5.7vw;
  min-width: 265px;
  min-height: 50px;
  background: orange;
  margin: 0px 0px 5px 5px;
}

.upper_block {
  height: 300px;
  background: yellowgreen;
}

<div class="wrapper_blocks">
  <div class="two_first_blocks">
    <div class="block_left">Левый</div>
    <div class="block_right">Правый</div>
  </div>
  <div class="upper_block">Нижний</div>
</div>

Answer 1

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper_blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;

}

.block_left {
  display: inline-block;
  height: 15.7vh;
  grid-column: 1 / 2;
  grid-row: 1;
  background: red;
}

.block_right {
  display: inline-block;
  height: 15.7vh;
  grid-column: 2 / 3;
  grid-row: 1;
  background: orange;
}

.upper_block {
  grid-column: 1 / 3;
  grid-row: 2;
  height: calc(100vh - 15.7vh - 10px);
  background: yellowgreen;
}

<div class="wrapper_blocks">
    <div class="block_left">Левый</div>
    <div class="block_right">Правый</div>
  <div class="upper_block">Нижний</div>
</div>

БЛОГ НА HUSL

Как сделать так, чтоб два первых элемента в потоке регулировали ширину нижнего эл-та?

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