2

I have created a JSFiddle with the issue here

This worked on Firefox v33 and v33.1, however has been failing in 34-35. This works in Chrome and IE11 properly. It may be a bug in Firefox, but I'm not sure. Basically I have HTML that looks like this:

.container {
  position: absolute;
  width: 150px;
}
.innercontainer {
  position: relative;
  padding-right: 25px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.outerwrapper {
  display: block;
  height: 24px;
  text-align: center;
  font-size: 10px;
  line-height: 24px;
  margin-bottom: 5px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  flex-direction: normal;
  -ms-flex-direction: normal;
  -moz-flex-direction: normal;
  -webkit-flex-direction: normal;
}
.wrapper {
  flex: 1;
  -ms-flex: 1 0 auto;
  -moz-flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  flex-direction: normal;
  -ms-flex-direction: normal;
  -moz-flex-direction: normal;
  -webkit-flex-direction: normal;
  background-color: grey;
}
.wrapper span {
  display: block;
  flex: 1;
  -ms-flex: 1;
  -moz-flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  text-align: left;
  font-size: 10px;
  padding: 0 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFFFFF;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="container">
  <div class="innercontainer">
    <section class="outerwrapper">
      <div class="wrapper">
        <span>
          super long string in here super long string
          in here super long string in here
        </span>
      </div>
    </section>
  </div>
</div>

Apologies for the convulated CSS; it's in a much larger web application and it has to be this way.

In Chrome you get "super long string in here ...", and in Firefox it just shows the entire string.

Oriol
  • 274,082
  • 63
  • 437
  • 513
automaton
  • 1,972
  • 5
  • 25
  • 40
  • Any reason you can't add a ``width`` or ``max-width`` attribute to the ``span`` element? – Patrick Roberts Jan 13 '15 at 22:42
  • yes, unfortunately the size specified at the top 'container' is fixed in my example, but that isn't actually the case in the application (it can be variable). so it can't be done that way. I should also note that if you put "width: 0px;" on the span tag, it will start to show properly in FF (no idea why), but can cause other issues. – automaton Jan 13 '15 at 22:43
  • 1
    Your CSS _is_ pretty convoluted... I'm not understanding why you need so much markup or why you're using flex boxes... I hope you can figure out your problem, but it seems to me that it stems from the lack of cross-browser consistency for the flexbox model. – Patrick Roberts Jan 13 '15 at 22:51
  • what's annoying is it worked fine in FF pre v34. i feel like it's a bug in FF, since both IE11 and Chrome handle it just fine. – automaton Jan 14 '15 at 16:13
  • possible duplicate of [How can I get FF 33.x Flexbox behavior in FF 34.x?](http://stackoverflow.com/questions/26895349/how-can-i-get-ff-33-x-flexbox-behavior-in-ff-34-x) – Oriol May 13 '15 at 23:00

2 Answers2

8

More efficient (and direct) than the other solution here -- just set min-width to 0.

.wrapper {
    min-width:0;
}

(This is better than overflow:hidden, because setting overflow makes the browser create a scrollable area under the hood, which has a memory cost.)

See my answer on this other question for more on why this is needed in Firefox 34. (It's from a flexbox spec change, which so far has only shipped in Firefox.)

.container {
  position: absolute;
  width: 150px;
}
.innercontainer {
  position: relative;
  padding-right: 25px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.outerwrapper {
  display: block;
  height: 24px;
  text-align: center;
  font-size: 10px;
  line-height: 24px;
  margin-bottom: 5px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  flex-direction: normal;
  -ms-flex-direction: normal;
  -moz-flex-direction: normal;
  -webkit-flex-direction: normal;
}
.wrapper {
  flex: 1;
  -ms-flex: 1 0 auto;
  -moz-flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  flex-direction: normal;
  -ms-flex-direction: normal;
  -moz-flex-direction: normal;
  -webkit-flex-direction: normal;
  background-color: grey;
  min-width:0;
}
.wrapper span {
  display: block;
  flex: 1;
  -ms-flex: 1;
  -moz-flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  text-align: left;
  font-size: 10px;
  padding: 0 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFFFFF;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="container">
  <div class="innercontainer">
    <section class="outerwrapper">
      <div class="wrapper">
        <span>
          super long string in here super long string
          in here super long string in here
        </span>
      </div>
    </section>
  </div>
</div>
Community
  • 1
  • 1
dholbert
  • 11,386
  • 3
  • 42
  • 31
4

The problem is that the Flexible Box Layout introduces the Implied Minimum Size of Flex Items:

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

That auto value computes to 0, except

on a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property

In your case, the main axis is the horizontal one. Therefore, if you set overflow-x to anything but visible, min-width will compute to 0, which was the initial value before auto was introduced.

For example,

.wrapper {
    overflow: hidden;
}


.container {
  position: absolute;
  width: 150px;
}
.innercontainer {
  position: relative;
  padding-right: 25px;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.outerwrapper {
  display: block;
  height: 24px;
  text-align: center;
  font-size: 10px;
  line-height: 24px;
  margin-bottom: 5px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  flex-direction: normal;
  -ms-flex-direction: normal;
  -moz-flex-direction: normal;
  -webkit-flex-direction: normal;
}
.wrapper {
  flex: 1;
  -ms-flex: 1 0 auto;
  -moz-flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  box-orient: horizontal;
  -webkit-box-orient: horizontal;
  flex-direction: normal;
  -ms-flex-direction: normal;
  -moz-flex-direction: normal;
  -webkit-flex-direction: normal;
  background-color: grey;
  overflow: hidden;
}
.wrapper span {
  display: block;
  flex: 1;
  -ms-flex: 1;
  -moz-flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex: 1;
  text-align: left;
  font-size: 10px;
  padding: 0 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFFFFF;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="container">
  <div class="innercontainer">
    <section class="outerwrapper">
      <div class="wrapper">
        <span>
          super long string in here super long string
          in here super long string in here
        </span>
      </div>
    </section>
  </div>
</div>
Oriol
  • 274,082
  • 63
  • 437
  • 513