家长's溢出:hiddendos't显示child's框阴影

Question

因此，我有一个返回两个div的react组件。父div可以通过将高度设置为100%来展开，否则会有固定的高度。

问题是：父级具有overflow:hidden。父对象中的子对象具有长方体阴影。因为overflow:hidden，它会切断子级的box-shadow，obv，因为它算作溢出。

解决方法：将子项的宽度设置为小于父项的确切宽度，并设置边距底部。但是在页面是"页面"的情况下；"左对齐"；，意味着左边不会有凹痕，这对我不起作用。Overflow-y:hidden;也不起作用。

有没有其他方法可以实现箱形阴影，并且仍然使用与上述相同的逻辑？

.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>

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>