Why is .div2 size taken into account inside .div1 even though the button element has overflow: hidden ?

I tried to add text-overflow: clip to the button as well but same result. Only adding display: flex seems to be working. Why ?

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Instead of overflow: hidden; you want to set the visibility to hidden like this.

visibility: hidden;

CodePudding user response：

okay, look like your just practicing some CSS. Try adding a fix width to the button and then the overflow: hidden; will take into effect. Also buttons have a display of inline-block by default so they automatically adjust to the size of there content or child.

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>