0

I am trying to make the blue box below fill the entire height of the button, but it doesn't seem to work. Why doesn't height: 100% work for the .el element?

button {
  background: red;
  height: 55px;
  display: flex;
  align-items: center;
}

.el {
  display: block;
  background: blue;
  height: 100%;
}
<button>
  <span class="el">
    Content
  </span>
  Other
</button>

Output (Chrome 76): enter image description here

Other browsers seem to show the expected result:
Edge: enter image description here
Firefox: enter image description here

Asons
  • 84,923
  • 12
  • 110
  • 165
XCS
  • 27,244
  • 26
  • 101
  • 151
  • Have you tried running this code snippet in this StackOverflow page ? The blue span does fill the entire height of the button. – anjanesh Sep 19 '19 at 12:28
  • 1
    @anjanesh It doesn't for me (in Chrome 76), I will post a screenshot. I tried it, and in Firefox it seems to work correctly. – XCS Sep 19 '19 at 12:29
  • 1
    Not all tags can/like to be displayed as `flex`. Check dupe link. – Asons Sep 19 '19 at 12:39
  • And btw, don't use `height: 100%` (or any other value) on flex children. They (when in row direction, which also is the default) generally fill their parent out of the box: https://stackoverflow.com/questions/46954952/how-to-stretch-flex-child-to-fill-height-of-the-container/46956430#46956430 – Asons Sep 19 '19 at 12:47
  • 1
    Also, changing flex childrens display type has no effect, they display/behave _block like_. – Asons Sep 19 '19 at 12:52
  • If you need to use a `button`, this CSS will give the expected result: `button { background: red; height: 55px; } .el { display: inline-block; background: blue; height: 100%; vertical-align: middle }` – Asons Sep 19 '19 at 12:54
  • @LGSon Thanks for the comments, the issue was that I already had the HTML and CSS there for a lot of different elements, so I wanted a quick fix for this specific button without changing too much of the CSS. I actually ended up using an exact value in pixels for the height, as that was the fastest way to solve this specific problem. – XCS Sep 19 '19 at 13:19
  • @LGSon I can not use `vertical-align-middle` as there are several other elements inside that button that rely on the flexbox `align-items: center;` style. – XCS Sep 19 '19 at 13:21
  • Well, then that should have been stated in the question. As the dupe says, a `button` can't be a flex parent (yet, cross browser), simply add another `span` as a main wrapper and make it `display: flex`. And do note, if some flex children should fill parent, some vertically center, you need to use `align-self` on their styles, e.g. `align-self: stretch` if `align-items: center` is use in parent style – Asons Sep 19 '19 at 13:42
  • I was afraid to change any HTML as it might affect many other components. I did not know about button not being able to be a flex parent, I find it a bit strange and not intuitive, as I expected it to act as any other DOM node. – XCS Sep 19 '19 at 16:48

1 Answers1

-1

try

.el {
  display: block;
  background: blue;
  height: inherit;
}
Aman Kumar
  • 152
  • 5
  • `height: inherit;` Does make the blue div larger in height, but it makes it too big (probably same height as the button including the paddings, so it overflows the button). – XCS Sep 19 '19 at 12:34
  • it sets height same as wrapper, your wrapper contains padding/margin/border as well so it's natural that `height: inherit` will make child to look larger than wrapper – Aman Kumar Sep 19 '19 at 12:41
  • basic mathematics – Aman Kumar Sep 19 '19 at 12:41
  • I understand that, but it's not the desired outcome (I am not the downvoter though) – XCS Sep 19 '19 at 12:42