如何阻止子div撑大其父容器？

问题根源在于Grid布局的默认行为：grid-template-columns: 1fr 1fr中的1fr等价于minmax(auto, 1fr)，当子元素（id3）尺寸过大时，会触发列宽自动扩展，挤占其他列的空间，同时容器id1也会被撑大出现滚动条。

只需两处修改即可实现需求：

• 给id1的grid-template-columns改为minmax(0, 1fr) minmax(0, 1fr)，强制列宽不超出Grid容器分配的空间，不会被内部内容撑开
• 给id2添加overflow: auto，让内部内容超出时在id2范围内显示滚动条

修改后的完整代码：

<body>
 <div id="id1" style="width: 100vw; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr; background-color: khaki;">
  <div id="id2" style="width: 100%; height: 100%; grid-row: 1; grid-column: 1; overflow: auto;">
   <div id="id3" style="width: 5000px; height: 3000px; background: dodgerblue"></div>
  </div>
  <div id="id4" style="width: 100%; height: 100%; grid-row: 1; grid-column: 2;"></div>
 </div>
</body>

这样无论id1的尺寸是多少，id2和id4都会平分空间，id3的超大尺寸只会让id2内部出现滚动条，不会影响整体布局。

内容的提问来源于stack exchange，提问作者Anton