CODEWITHSUNDEEP
htmlcssbuttonflexboxoverflow
user16799703
user16799703

Reputation:

CSS overflow: hidden not working with button

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>

Upvotes: 0

Views: 1965

Answers (2)

troublesome naw
troublesome naw

Reputation: 76

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>

Upvotes: 0

DylanH2009
DylanH2009

Reputation: 13

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

visibility: hidden;

Upvotes: 0

Related Questions