Flex布局三容器适配：单容器自适应，另两容器保持min-content

可以通过将.container改为Grid布局来实现需求，无需修改HTML结构：

.container {
  display: grid;
  grid-template-areas: 
    "left content"
    "bottom bottom";
  grid-template-columns: min-content 1fr;
  grid-template-rows: 1fr min-content;
  height: 20rem;
  width: 20rem;
  overflow: hidden;
  resize: both;
  border: 1px solid blue;
}

.left {
  grid-area: left;
  border: 1px solid red;
}

.content {
  grid-area: content;
  border: 1px solid pink;
  overflow: auto; /* 内容超出时可滚动 */
}

.bottom {
  grid-area: bottom;
  border: 1px solid grey;
}

布局逻辑说明： #

• grid-template-columns: min-content 1fr：第一列宽度固定为.left的最小内容宽度，第二列占据剩余所有水平空间，满足.left宽度固定、.content横向自适应缩放的需求。
• grid-template-rows: 1fr min-content：第一行高度占据容器垂直方向的剩余空间（自动减去.bottom的最小高度），第二行高度固定为.bottom的最小内容高度，实现.bottom高度固定、.content纵向自适应缩放的效果。
• grid-template-areas：通过命名区域将.bottom跨两列放置，直接实现100%宽度的要求。

原Flex方案的局限： #

原Flex布局采用row方向+wrap时，第一行的.left和.content会被默认拉伸至容器的完整高度，无法让.content的高度自动扣除.bottom的占用空间——Flex的行级布局逻辑更擅长一维空间分配，难以直接实现这种“上下+左右”的二维嵌套空间划分，而Grid天然支持二维空间的精确控制，更适配此类需求。

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