父元素的overflow:hidden属性不显示子元素的box-shadow效果。

Question

所以，我有一个返回两个div的react组件。父div可以通过将高度设置为100％来扩展，否则就有固定的高度。

问题是：父级具有overflow:hidden。父级内部的子项具有box-shadow。由于overflow:hidden，它截断了子项的box-shadow，因为它被视为溢出。

解决方法：将子元素的宽度设置为小于父元素的确切宽度，并设置margin-bottom。但在页面“左对齐”的情况下，这对我不起作用。Overflow-y:hidden;也不起作用。

是否有另一种方法可以实现box-shadow并仍然使用上述相同的逻辑？

.parent{
  width: 30%;
  max-height: 80px;
  overflow: hidden;
}

.child{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

<div class="parent">
  <div class="child">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of class.
  </div>
</div>

- bikkeltio

---

这个回答解决了你的问题吗？父元素重叠子元素的box-shadow - Dharman

为什么需要使用overflow:hidden？ - Temani Afif

@Dharman 不行，因为正确的答案是使用 overflow-y:hidden。但那样行不通。你可以在编辑器中自己尝试一下。 - bikkeltio

@TemaniAfif，如上所述，根据布尔值将高度设置为自动或固定。 - bikkeltio

Answer 1

唯一的另一种选择是通过使用负边距扩展父元素以保持其大小，然后应用填充来缩小其内容。

但是，如果它恰好位于具有溢出隐藏的容器中，它将无法正常工作。

.parent{
  width: 30%;
  max-height: 80px;
  margin: -15px;
  padding: 15px;
  overflow: hidden;
}

.child{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

<div class="parent">
  <div class="child">
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of class.
  </div>
</div>

- isherwood