1

I have an issue with <button> nodes that refuse to extend their container and, at the same time, fill the container. Update: The issue only appears in Firefox 42, not in Chrome 47.

<!-- This one has a limited width -->
<div class="outer">
  <!-- This one is positioned absolutely and shall be extended -->
  <div class="container btn1" style="top: 0px">
    <!-- These shall extend the container and fill the whole width -->
    <button>Some lengthy label for the button</button>
    <button>Another label</button>
    <button>Still another label</button>
  </div>
</div>

Probably, this example demonstrated the issue best: http://jsfiddle.net/5dh4j0hy/1/

I already found out that <button> is a "replaced element", which is the reason for my problems:

What I could not find out is: How do I solve my specific issue? As the fiddle demonstrates, width: 100% and width: auto do not achieve the desired result. And as this is no problem with borders or padding, box-sizing: border-box is not if relevance here, either.

Community
  • 1
  • 1
BurninLeo
  • 4,240
  • 4
  • 39
  • 56

1 Answers1

4

Testing on Firefox 42 (which seems to be the only browser currently exhibiting this issue), my suggestion is to use min-width rather than width.

So in your example, change this declaration block should work:

div.btn1 button { min-width: 100% }

Here's an updated JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

Serlite
  • 12,130
  • 5
  • 38
  • 49