Как лучше расположить блоки что бы некоторые из них занимали всю высоту блока родителя?

Question

Как добиться подобного расположения блоков при помощи грид или Флекс? На ум приходит вариант только такой вариант но мне кажется должно быть более элегантное решение на гридах или тех же флексах. Блок нужен для вывода новостей

.main{
  height: 100px;
  width: 200px;
  display: flex;
}

.one{
  width: 80%;
  display: flex;
  flex-wrap: wrap;
}

.one__one{
  height: 50px;
  width: 70%;
  background-color: #000000;
}

.one__two{
  height: 50px;
  width: 30%;
  background-color: #9D5CD0;
}

.one__three{
  height: 50px;
  width: 30%;
  background-color: #9D5CD0;
}

.one__four{
  height: 50px;
  width: 70%;
  background-color: #000000;
}

.two{
  width: 20%;
}

.two_content{
  background-color: #333333;
  height: 100%;
}

<div class="main">
  <div class="one">
    <div class="one__one"></div>
    <div class="one__two"></div>
    <div class="one__three"></div>
    <div class="one__four"></div>
  </div>
  <div class="two">
    <div class="two_content"></div>
  </div>
</div>

БЛОГ НА HUSL

Как лучше расположить блоки что бы некоторые из них занимали всю высоту блока родителя?

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