3

I try the following sketch (https://jsfiddle.net/m4njf8bL/):

<div style="position: relative; display: flex; height: 100px; border: 1px solid red; padding: 5px;">
  <button style="position: relative; display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; justify-content: center; border: 1px solid green; ">
    <span style="display: flex; flex: 1 1 auto; align-items: stretch; justify-content: center; border: 1px solid blue;">Ololo</span>
  </button>
</div>

The inner span stretches vertically in all browsers except for Firefox. Why and is there a workaround?

Marat Dakota
  • 31
  • 1
  • 1
    Based on the info on http://caniuse.com/#feat=flexbox Firefox doesn't support that property on button elements, should be fixed on v.52 check https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c2 – DaniP Mar 15 '17 at 14:26
  • I have Firefox 52 (in which it's supposed to be fixed), but it still doesn't stretch... – Marat Dakota Mar 15 '17 at 14:40
  • Yep I don't have that version but maybe check first if the flexbox works without the stretch maybe it's an extra bug, if that you could report it – DaniP Mar 15 '17 at 14:42
  • Why do you need the span inside a button? You can either remove the span or put the button inside the span. Hope this will solve your issue. – vadber Mar 15 '17 at 14:55
  • This is a simplified example. The real thing has something much more complex inside. – Marat Dakota Mar 15 '17 at 14:58

0 Answers0