CSS 溢出：隐藏按钮无法使用

Question

为什么在 .div1 中考虑了 .div2 大小，即使按钮元素有 overflow: hidden？

我也尝试将 text-overflow: clip 添加到按钮，但结果相同。仅添加 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

而不是溢出：隐藏；你想像这样将可见性设置为隐藏。

可见性：隐藏；

Answer 2

好的，看起来你只是在练习一些 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>

CSS 溢出：隐藏按钮无法使用

CSS overflow: hidden not working with button

html

css

overflow

button

flexbox