4元素视频Grid布局高度溢出问题求助

我正在制作一个包含4个元素的视频网格，用图片替代视频做了示例代码。现在的问题是，占满宽度的grid区域没有遵守分配的1fr空间——当其他区域都设为1fr时，这个跨两行的sidebar区域无法按预期高度显示，出现溢出情况。

原代码 #

CSS #

.container {
  display: grid;
  background-color: pink;
  padding: 4rem;
  width: 100%;
  height: 600px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-template-areas: "footer footer footer" "content-1 sidebar sidebar" "content-2 sidebar sidebar"
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sidebar {
  flex: 1;
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.footer {
  flex: 3;
  grid-area: footer;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

HTML #

<div class="container">
  <div class="item sidebar">
    <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div class="item content-1"> <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
  <div class="item content-2"> <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
  <div class="item footer"> <img style="height: 2rem; width: 2rem" src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
</div>

问题核心是容器的padding和grid-gap未被纳入高度计算，导致分配给grid行的空间被挤压，再加上无用的flex属性干扰，最终引发溢出。修改步骤如下：

1. 给.container添加box-sizing: border-box，让padding包含在设定的600px高度内，避免额外占用空间。
2. 移除.sidebar和.footer上的flex属性，grid布局不需要这些属性控制元素尺寸。
3. 给.item添加overflow: hidden，确保内部图片严格遵守单元格尺寸，不会溢出。

修改后的代码 #

CSS #

.container {
  display: grid;
  background-color: pink;
  padding: 4rem;
  width: 100%;
  height: 600px;
  /* 让padding包含在容器高度内 */
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 1rem;
  grid-template-areas: "footer footer footer" "content-1 sidebar sidebar" "content-2 sidebar sidebar"
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.footer {
  grid-area: footer;
}


/* OTHER STYLES */

body {
  background-color: #3b404e;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  /* 防止内部元素溢出 */
  overflow: hidden;
}

HTML #

<div class="container">
  <div class="item sidebar">
    <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div class="item content-1"> <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
  <div class="item content-2"> <img src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
  <div class="item footer"> <img style="height: 2rem; width: 2rem" src="https://images.unsplash.com/photo-1620403724063-e7c763fe9d58?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /></div>
</div>

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