CSS溢出：隐藏不与按钮一起使用答案

【问题标题】：CSS overflow: hidden not working with buttonCSS溢出：隐藏不与按钮一起使用
【发布时间】：2022-01-06 08:25:34
【问题描述】：

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

我也尝试将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>

【问题讨论】：

您的预期结果是什么？你想达到什么目的？
"添加显示：flex 似乎工作正常。"？以什么方式工作？您想在这里实现什么目标？
您的代码在我的设备上运行良好。
对我来说（Edge/Windows10）是否有显示弯曲对我没有任何影响。没有溢出，看起来还可以。

标签： html css button flexbox overflow

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

可见性：隐藏；

【讨论】：