css - 带滚动的 Flex 全高页面

Question

我需要这种在 flex 中的布局是全高的

我需要红色背景根据里面的内容滚动，如果有更多的内容保持相同的大小只是为了滚动？这可能与 flex 吗？

这就是我现在所拥有的

<style>
  .content {
    display: flex;    

  .content-left {
    display: flex;
    width: 512px;
    padding-right: 24px;
    flex-direction: column;
    padding-top: 56px;    

  .content-header {
    margin-bottom: 24px;
    
      small {
        display: flex;
        margin-bottom: 8px;
      }    
    }
  }
    
  .content-right {
    display: flex;
    width: 928px;
  }
</style>

<header>TEST<header>
<div class="container">
  <section class="content">
    <aside class="content-left">
      <div class="content-header">
        <small></small>
        <h1>
         TITLE
        </h1>
      </div>
      <section class="content-body">

      </section>
      <section class="content-footer">
       
      </section>
    </aside>
    <div class="content-right">
     
    </div>
  </section>
</div>

标签： cssflexbox

Answer 1

对于此类设计，您可以很好地使用网格系统。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.item3 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.item1, .item3, .item2 div {
    padding: 10px;
}

.green {
    background-color: green;
}

.red {
    background-color: red;
}

<div class="grid-container">
  <div class="item1">header</div>
  <div class="item2">
    <div class="green">title</div>
    <div class="red">image or red something</div>
  </div>
  <div class="item3">aside aside aside aside aside aside aside aside aside aside aside aside</div>  
</div>