如何让子元素突破overflow:hidden的父元素且不破坏布局？

问题背景 #

父元素设置了overflow: hidden用于约束内部内容（如图片）不溢出，但需要让其中一个子元素突破父元素边界显示，当前子元素因overflow: hidden被截断。

父元素原有CSS：

.parent {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

子元素原有CSS：

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  top: 0;
  right: -15px;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

原有HTML结构：

<div class="parent">
  <!-- 需要被约束的内部内容 -->
  <div class="child">activity name</div>
</div>

可行解决方案 #

方案1：拆分父元素为双层容器 #

将overflow: hidden的作用范围缩小到仅约束需要限制的内容，让需要突破的子元素脱离该范围。

修改后HTML：

<div class="parent-wrapper">
  <div class="content-container">
    <!-- 原来需要被overflow:hidden约束的内容 -->
  </div>
  <div class="child">activity name</div>
</div>

对应CSS：

.parent-wrapper {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.content-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* 继承原父元素的flex布局属性，保证内部内容排版不变 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  top: 0;
  right: -15px;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

方案2：用clip-path替代overflow: hidden（适配圆角场景） #

如果原父元素的overflow: hidden主要是为了配合border-radius实现圆角裁剪，可通过clip-path仅裁剪需要约束的内容，让子元素不受限制。

修改后HTML：

<div class="parent">
  <div class="content-to-clip">
    <!-- 需要被约束的内容（如图片） -->
  </div>
  <div class="child">activity name</div>
</div>

对应CSS：

.parent {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* 移除overflow:hidden */
}

.content-to-clip {
  width: 100%;
  height: 100%;
  /* 用clip-path模拟圆角裁剪，数值与父元素border-radius一致 */
  clip-path: inset(0 0 0 0 round 8px);
  overflow: hidden; /* 额外保险，防止内容溢出 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  top: 0;
  right: -15px;
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

方案3：将子元素移出父元素，通过定位关联 #

直接把需要突破的子元素放到父元素外部，通过绝对定位绑定父元素的位置，完全脱离父元素的overflow: hidden限制。

修改后HTML：

<div class="parent">
  <!-- 需要被约束的内部内容 -->
</div>
<div class="child">activity name</div>

对应CSS：

.parent {
  position: relative;
  height: 350px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.child {
  position: absolute;
  padding: 5px 10px;
  min-width: 50%;
  color: #fff;
  background: rgb(255, 145, 0);
  /* 根据父元素的位置调整定位，例如父元素是body下的直接子元素 */
  top: 0;
  right: calc(100% - 父元素宽度 + 15px); 
  z-index: 1;
  border-radius: 10px 0 0 10px;
  font-weight: bolder;
}

注：此方案需要根据父元素的实际布局位置调整定位参数，确保子元素与父元素位置匹配。

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