如何利用父容器的overflow:hidden隐藏指定子div？

这个问题我之前也踩过坑，核心是Flexbox的默认收缩行为在捣乱！

你当前的代码里，父容器用了display: flex，子元素设置width: 100%，但Flexbox默认给所有子元素加了flex-shrink: 1——这个属性会让子元素自动缩小宽度，强行挤在父容器里，自然不会触发overflow: hidden的隐藏效果。

解决方案：禁止子元素收缩 #

只需要给.child类加上flex-shrink: 0，就能阻止Flexbox压缩子元素，让它们保持设置的100%宽度，超出父容器的部分就会被自动隐藏，刚好只显示第一个子元素。

完整代码示例：

<div class="parent">
  <div class="child">第一个子块</div>
  <div class="child">第二个子块</div>
  <div class="child">第三个子块</div>
  <div class="child">第四个子块</div>
</div>

<style>
.parent {
  display: flex;
  overflow: hidden;
  /* 可选：添加高度和边框方便查看效果 */
  height: 120px;
  border: 1px solid #ddd;
}

.child {
  width: 100%;
  flex-shrink: 0; /* 关键：禁止Flex收缩 */
  /* 可选：添加背景色区分子元素 */
  background-color: #f5f5f5;
  border-right: 2px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
</style>

额外说明 #

如果你的布局是纵向排列（想让第一个子块纵向显示，其余隐藏），只需要调整父容器的flex-direction: column，子元素改成height: 100%并保留flex-shrink: 0，原理完全一致。

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