网格布局:垂直尺寸相互独立的2列

Question

我创建了这个jsFiddle来展示这个问题。

代码如下：

HTML：

<div id="container">
  <div id="left-col">
    LEFT
  </div>
  <div id="right-col1">
    RIGHT1
  </div>
  <div id="right-col2">
    RIGHT2
  </div>
  <div id="right-col3">
    RIGHT3
  </div>
</div>

CSS：

#container {
  display: grid;
  grid-template-columns: 15% 1fr;
  grid-template-areas:
  "left_area right_area1"
  "left_area right_area2"
  "left_area right_area3";
}

#left-col {
  grid-area: left_area;
}

#right-col1 {
  grid-area: right_area1;
}

#right-col2 {
  grid-area: right_area2;
}

#right-col3 {
  grid-area: right_area3;
}

当我在左边的列上有大的垂直内容时，它会自动扩展右边的内容，而我在右边列中的内容没有按我的意愿显示。

我的目标是，如果两列不能断开链接，则右列将成为这两列垂直大小的驱动程序。

有没有办法：

• 让网格的垂直尺寸独立(看起来不太可能，否则就不再是网格了)？
• 在左列上授权溢出，这样右列的大小优先？

当然，任何其他的帮助都会受到感谢。

Answer 1

这是因为您的容器div是根据内部较大的div增长的。

如果您希望右侧列独立于左侧列，则必须创建2个容器div：

<div id="container-left">
 <!-- Your left content -->
</div>
<div id="container-right">
 <!-- Your right content -->
</div>