1

As can be seen in this simple codepen: http://codepen.io/anon/pen/Mazjyv, there's a button which is a flex item with a flex-basis of 0%.

In other browsers content does not overflow the button container, however on IE11 it does.

Any clue why that is?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Francisc
  • 77,430
  • 63
  • 180
  • 276

1 Answers1

1

The problem is this rule:

button
{
    flex: 0 0 0%;
}

You're telling the button: don't grow, don't shrink, your initial main size is 0.

Instead use:

button
{
    flex: 1 0 0%;
}

Also, btw, the text overflow was also happening in Chrome 46.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • The problem with that is it grows too much. In Canary and Firefox it behaves like I want: doesn't grow or shrink and collapses the 2 words on 2 lines. – Francisc Nov 10 '15 at 12:25
  • By "the 2 words" I mean the words inside the button container are placed one on each line. – Francisc Nov 10 '15 at 12:26
  • Do you want the words on two lines at all times? – Michael Benjamin Nov 10 '15 at 12:28
  • Nope, that's the thing. I want it to collapse one when there just isn't enough space. – Francisc Nov 10 '15 at 12:30
  • Buttons can't be flex containers though. – Francisc Nov 10 '15 at 12:31
  • Also, as far as I know the flex spec says that unless clearly specified using widths or heights, flex item's contents should never overflow their container. That is, a `flex-basis` of `0`, would translate to content-width or content-height. Maybe this is fixed in Canary which is why it works there, but not totally sure about this. – Francisc Nov 10 '15 at 12:34
  • Actually, I just remembered, ` – Michael Benjamin Nov 10 '15 at 12:35
  • Buttons can't be flex containers, but they can be flex items if I remember right. The button in the codepen works well with `flex` as long as it doesn't have a 0-basis. – Francisc Nov 10 '15 at 12:38
  • Here's why: given this iamge from the Flexbox spec http://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg it clear that I need to set a basis of `auto` so that non-content spacing doesn't grow or shrink. Then, in order to get the words to collapse, I should set a `max-width`. – Francisc Nov 10 '15 at 12:46
  • Another option is to set the basis to `0%` and set a `min-width`. I think I like this one better. – Francisc Nov 10 '15 at 12:46
  • Thank you for helping me figure this out. – Francisc Nov 10 '15 at 12:47
  • 1
    Quick note on your answer update: flex properties do apply to button elements, just not flex container ones. Flex item properties are fine. – Francisc Nov 10 '15 at 18:33
  • 1
    Yes, you're absolutely correct. I've rolled back the edit and [revised my other answer](http://stackoverflow.com/a/33345537/3597276). Thanks. – Michael Benjamin Nov 11 '15 at 15:49