CSS溢出:隐藏不使用按钮

Question

为什么即使.button有overflow: hidden，.div1内部也要考虑.div2的大小？

编辑：如您所见，.div1的height为150px(对应于.div2(，而不是50px(对应.button(。

仅添加display: flex似乎有效。为什么？

.div1 {
padding: 10px;
background-color: orange;
}
.div2 {
width: 50px;
height: 150px;
background-color: red;
}
.button {
height: 50px;
overflow: hidden;
/* display: flex; */
}

<div class="div1">
<button class="button">
<div class="div2"></div>
</button>
</div>

Answer 1

好吧，看起来你只是在练习一些CSS。尝试为按钮添加固定宽度，然后overflow: hidden;将生效。此外，默认情况下，按钮具有内联块的显示，因此它们会根据内容或子项的大小自动调整。

.div1 {
padding: 10px;
background-color: orange;
}
.div2 {
width: 50px;
height: 150px;
background-color: red;
}
.button {
height: 50px;
overflow: hidden;
/* display: flex; */
}
.button-1 {
width: 45px;
}

<div class="div1">
<button class="button">
BEFORE
<div class="div2"></div>
</button>
</div>
<div class="div1">
<button class=" button button-1">
AFTER
<div class="div2"></div>
</button>
</div>

Answer 2

代替溢出：隐藏；您希望将可见性设置为隐藏，如下所示。

可见性：隐藏；