Flexbox一列长短列

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才能使列在宽屏模式下自动换行，由于内容大小可变，我不能这样做。例如，如果我在cell-1中只有2个小段落，而在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>