Flexbox one длинные и короткие колонны

Question

Я пытаюсь реализовать макет следующим образом:

На более узком экране это выглядит так:

вот мой код:

.cont {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}
.cell{
  border: 2px solid black;
}
.cell-1 {
  flex-basis: 100%;
  width: 70%;
  margin-right: 25px;
}
.cell-2,
.cell-3 {
  width: 30%;
}
@media (max-width: 1000px) {
  .cont{
    flex-wrap: nowrap;
  }
  .cell {
    width: 100%;
  }
  .cell-1, .cell-2, cell-3 {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }

<div class="cont">
  <div class="cell cell-1">
    <h2>One</h2>
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
  </div>
</div>

Проблема в том, что мне нужно установить height на .cont, чтобы столбцы могли переноситься в широкоэкранном режиме, и я не могу этого сделать из-за переменного размера содержимого. Например, если бы у меня было только 2 маленьких абзаца в cell-1 и height в 500px, это привело бы к тому, что нижний колонтитул был слишком далеко от .cont. Или, если бы у меня было много содержимого в cell-1 и height: 500px, это привело бы к тому, что содержимое внутри .cont пошло бы под нижний колонтитул. Что бы вы предложили решить эту проблему?

codepen

Answer 1

Вы можете «легко» добиться этого с помощью сетки:

.cont {
  display: grid;
  grid-template: 'content side-1' 'content side-2';
  grid-template-columns: 7fr 3fr;
  grid-column-gap: 1em; 
}
.cell-1 {
  grid-area: content;
}
.cell-2 {
  grid-area: side-1;
}

.cell-3 {
  grid-area: side-2;
}
@media(max-width: 768px) {
  .cont {
    grid-template: 'side-1' 'content' 'side-2'
  }
}

<div class="cont">
       <div class="cell cell-1">
          <h2>One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. Ut pharetra sit amet aliquam id diam maecenas. Nunc eget lorem dolor sed viverra. Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.
          <p>Congue quisque egestas diam in arcu cursus euismod quis. Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Quis eleifend quam adipiscing vitae proin sagittis nisl. In pellentesque massa placerat duis ultricies lacus. Curabitur vitae nunc sed velit dignissim sodales.

       </div>

       <div class="cell cell-2">
          <h2>Two</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sem viverra aliquet eget sit amet. Viverra nibh cras pulvinar mattis nunc. 


       </div>

       <div class="cell cell-3">
         <h2>Three</h2>
         <p>Non quam lacus suspendisse faucibus interdum posuere lorem. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. 
       </div>
    </div>