CSS overflow: hidden not working with button

Question

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

EDIT: As you can see .div1 has a height of 150px (corresponding to .div2) instead of 50px (corresponding to .button).

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>

Answer 1

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>