如何让设置flex:1的空div保持16/9宽高比且不溢出容器？

要实现item既填充可用空间又保持16:9比例且不溢出容器，只需调整两个关键CSS属性：

• 给.container移除align-items: center，改为align-items: stretch，让子元素宽度默认撑满容器
• 给.item添加margin: 0 auto实现水平居中，保留max-width: 100%防止宽度溢出

修改后的完整代码 #

CSS

.parent {
  display: flex;
  column-gap: 30px;
  row-gap: 30px;
}

.container {
  display: flex;
  background:pink;
  flex-direction: column;
  height: 300px;
  width: 500px;
  align-items: stretch; /* 替换原align-items: center */
  justify-content: space-between;
}

#container-2 {
  height: 500px;
  width: 300px;
  background: green;
}

.item {
  position: relative;
  flex: 1;
  background: black;
  aspect-ratio: 16/9;
  opacity: 0.5;
  max-width: 100%;
  margin: 0 auto; /* 水平居中 */
}

HTML

<div class="parent">
  <div class="container">
    <p>Example 1</p>
    <div class="item"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia incidunt dolorem quam! Tenetur facere, facilis modi ipsa sapiente repellendus dolores doloremque quae. Laborum sapiente voluptatum unde fugit tenetur laudantium animi.</p>
  </div>

  <div class="container" id="container-2">
    <p>Example 2</p>
    <div class="item"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia incidunt dolorem quam! Tenetur facere, facilis modi ipsa sapiente repellendus dolores doloremque quae. Laborum sapiente voluptatum unde fugit tenetur laudantium animi.</p>
  </div>
</div>

原理说明 #

• align-items: stretch让item默认宽度填满容器，避免因aspect-ratio强制撑宽溢出
• margin: 0 auto在撑满容器宽度的基础上实现水平居中，兼顾布局需求
• flex:1确保item占据容器内的剩余可用空间，aspect-ratio:16/9维持宽高比，max-width:100%兜底防止极端情况溢出

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