CSS 网格具有独立可滚动区域的两列布局

发布于04月04日

我想实现一个布局，其中有两个列适合屏幕的高度.

左列有两行，每行占可见可用高度的50%(没有固定高度，应具有响应性).如果每一行的内容大于50%，则它应该是可滚动的.
右栏采用完全高度.如果其内容跨越可见屏幕，则应显示滚动条.

The current behaviour of my prototype is the following. The right side is working. However I need some help for the left side, because the first row takes more space than the second row:

The desired layout should look like the following:

编辑

您可以使用弹性框来包含左侧，并使其居中并包含元素.我已经将min-height减少到100px，以使演示在预览中工作得更好，但它很容易更改为其他大小.

.ctnr {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  height: 100vh;
  grid-template-areas: "header header" 
                         "nav main" 
                       "footer footer";
}

h3 {
  margin-bottom: 0;
}

header {
  grid-area: header;
  background: turquoise;
}

nav {
  grid-area: nav;
  background: grey;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100px;
}

.scroll-left {
  overflow: scroll;
  flex: 1;
}

main {
  grid-area: main;
  background: orange;
  overflow: scroll;
  min-height: 100px;
}

body {
  margin: 0;
}

<div class="ctnr">
  <header>
    <h3>header</h3>
    <div>some content</div>
  </header>
  <nav>
    <div class="scroll-left">
      nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>nav<br>
    </div>
    <div class="scroll-left">
      nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>nav2<br>
    </div>
  </nav>
  <main>main main main main
    <br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>    main main mainmain
    <br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>main<br>    main main main
  </main>
</div>