如何让Grid/Flex项目保持固定长度，避免内容溢出容器？

问题描述 #

我是HTML和CSS新手，正在通过修改课程源码制作YouTube克隆项目。但每次使用课程源码外的图片时，布局就会错乱，尝试使用flex布局还出现了元素溢出问题。想请教：

• 如何确保Grid或Flex项目保持固定长度，内容不溢出容器？
• 如何保证图片或视频维持自身尺寸比例？

解决方案 #

1. 固定图片容器比例，防止布局错乱 #

给缩略图容器设置YouTube标准宽高比，同时让图片自适应容器且保持比例，避免外来图片尺寸不一撑破布局：

.thumbnail-row {
  margin-bottom: 8px;
  position: relative;
  aspect-ratio: 16/9; /* 强制容器保持16:9的标准缩略图比例 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器，保持自身比例，不会拉伸变形 */
}

2. 限制Grid项目内容，防止溢出 #

给视频预览卡片添加溢出限制，同时对长标题做两行截断处理，避免内容撑高容器：

.video-preview {
  overflow: hidden; /* 确保内部内容不会撑破网格项 */
}

.video-title {
  margin-top: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 标题最多显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden; /* 截断超出部分 */
}

3. 修复代码错误 #

原CSS中.video-time的background-color属性多了无效字符，修正后：

.video-time {
  font-size: 12px;
  font-weight: 500;
  padding: 4px;
  border-radius: 2px;
  background-color: black;
  color: white;
  position: absolute;
  bottom: 8px;
  right: 5px;
}

修改后的完整代码 #

CSS代码 #

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

.video-title {
  margin-top: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-info-grid {
  display: grid;
  grid-template-columns: 50px 1fr;
}

.profile-picture {
  width: 36px;
  border-radius: 50px;
}

.thumbnail-row {
  margin-bottom: 8px;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.video-author,
.video-stats {
  font-size: 12px;
  color: rgb(96, 96, 96);
}

.video-author {
  margin-bottom: 4px;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 16px;
  row-gap: 40px;
}

@media (max-width: 750px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 751px) and (max-width: 999px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 400px) and (max-width: 600px){
    .video-grid {
      grid-template-columns: 1fr ;
    }
  }

.video-time {
  font-size: 12px;
  font-weight: 500;
  padding: 4px;
  border-radius: 2px;
  background-color: black;
  color: white;
  position: absolute;
  bottom: 8px;
  right: 5px;
}

HTML代码 #

<main>
  <section class="video-grid">
    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="images/selmon-bhai.jpeg">
        <div class="video-time">14:20</div>
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="images/hrithik.png">
        </div>
        <div class="video-info">
          <p class="video-title">
            Selmon Bhai ne mumbai me bacchi ko bachaaya. &#129402; &#129402;
          </p>
          <p class="video-author">
            Marques Brownlee
          </p>
          <p class="video-stats">
            3.4M views &#183; 6 months ago
          </p>
        </div>
      </div>
    </div>
    <div class="video-preview">
      <div class="thumbnail-row">
        <img class="thumbnail" src="images/selmon-bhai.jpeg">
        <div class="video-time">14:20</div>
      </div>
      <div class="video-info-grid">
        <div class="channel-picture">
          <img class="profile-picture" src="images/hrithik.png">
        </div>
        <div class="video-info">
          <p class="video-title">
            Selmon Bhai ne mumbai me bacchi ko bachaaya. &#129402; &#129402;
          </p>
          <p class="video-author">
            Marques Brownlee
          </p>
          <p class="video-stats">
            3.4M views &#183; 6 months ago
          </p>
        </div>
      </div>
    </div>
</main>

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