Difference in Firefox and Chrome's understanding of widths of flex items?

Question

I want to use flexbox to display a three divs in a column layout such that they take up 100% of the width of the parent container. I want these columns to have a exactly 1 line's height. The center div's contents might overflow, so I want it have the nice ellipsis at the end.

I've got a demo for this here: http://jsfiddle.net/f14q15ey/

HTML:

<div class="flex">
    <div class="col1">Column 1</div>
    <div class="col2">
        <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eos sed dolorum fugit! Nihil ratione laudantium a cumque vero natus excepturi praesentium error possimus eveniet tempore repudiandae inventore rerum porro?
        </span>
    </div>
    <div class="col3">Column 2</div>
</div>

CSS:

.flex {
    display: flex;
}

.col1 {
    width: 25%;
    flex: 0 0 25%;
}

.col2 {
    flex: 1 1 auto;
}

span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
}

.col3 {
    flex: 0 0 25%;
}

It renders just fine in Chrome (41) and Safari. However, in Firefox (37), the inner container expands in width to include the all of the content on the one line and hence pushes the size of the container outside the viewport.

What am I doing wrong? Is this maybe a bug in Firefox's implementation?

I tried something with adding position:absolute ; and max-width:50%. http://codepen.io/cuterajat26/pen/EaBRzd — Rajat Talwar, Apr 11 '15 at 12:36
Thanks, Rajat. Any idea why position: absolute fixes the problem? It seems like a strange way to use position: absolute. Regardless, I think I've solved the problem. I'll answer below. — Rakesh Pai, Apr 11 '15 at 12:42
position:absolute will take the "span" out of the dom flow which will not force its parent div to expand. — Rajat Talwar, Apr 11 '15 at 12:48

score 1 · Answer 1 · answered Apr 11 '15 at 12:46

1

Ugh! Adding overflow: hidden to .col2 solves the problem in Firefox. It doesn't make sense to me, but there you go.

On a side note: Three days of raging over this, and I find a fix just minutes after posting here.

answered Apr 11 '15 at 12:46

Rakesh Pai

26,069
3
25
31

score 0 · Answer 2 · answered Apr 11 '15 at 12:43

I tried something with adding position:absolute ; and max-width:50%. http://codepen.io/cuterajat26/pen/EaBRzd, seems to work.

span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50%;
    position:absolute;
    display: inline-block;
}

Difference in Firefox and Chrome's understanding of widths of flex items?

2 Answers2