Q: css: взаимное расположение блоков есть код:
<div class = 'content'>
    <div class = 'block1'></div>
    <div class = 'block2'></div>
    <div class = 'block3'></div>
</div>

block1 фиксированной ширины
block2 фиксированной высоты
block2 и block3 слева от block1

Если задать block1 другую ширину, остальные блоки должны на это среагировать соответственно.
Подскажите как лучше такой вариант реализовать?


*

*делать таблицу или использовать display: table не лучший вариант

*использовать position хорошо если никакие блоки меняться не будут

*использовать flex где изначально задать взаимное отношение блоков


Второй вариант реализовал, но в динамике очень неудобно использовать - надо отслеживать все блоки
Думаю, лучше через flex, но никак не могу понять как это реализовать. При условии что block1.width + block2.width < 100%, т.е. если block2 будет очень узким не должно случиться так, чтобы block3 стал сбоку (справа) от block2
Подскажите как можно реализовать такую схему через flex?

A: Первый вариант — Grid:


.block1 {
  background-color: red;
  grid-area: block1;
  min-height: 70px;
}

.block2 {
  background-color: green;
  min-height: 70px;
  grid-area: block2;
}

.block3 {
  background-color: yellow;
  min-height: 300px;
  grid-area: block3;
}

.content {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-areas: "block1 block2" "block1 block3";
}

@media (max-width: 400px){
  .content {
    display: block;
  }
  .block1,
  .block2,
  .block3 {
    width: 100%;
  }
}
<div class='content'>
  <div class='block1'></div>
  <div class='block2'></div>
  <div class='block3'></div>
</div>


Второй вариант — Flexbox:


.wrp {
  display: flex;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
}

.block1 {
  background-color: red;
}

.block2 {
  background-color: green;
  min-height: 70px;
}

.block3 {
  background-color: yellow;
  min-height: 300px;
  flex-grow: 1;
}

.content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 1;
}
<div class='wrp'>
  <div class='block1 sidebar'></div>
  <div class="content">
    <div class='block2'></div>
    <div class='block3'></div>
  </div>
</div>



A: 

html, body, .content {
  height: 100%;
  margin: 0;
}

.content {
  display: grid;
  grid-template: auto 1fr / auto 1fr;
}

.left {
  background: orange;
  width: 100px;
  grid-row: 1 / span 2;
}

.top {
  background: blue;
  height: 50px;
}

.other {
  background: green;
}
<div class="content">
  <div class="left"></div>
  <div class="top"></div>
  <div class="other"></div>
</div>


