Why does this behave the way it does with max-width: 0?

Question

See http://jsfiddle.net/mpx7os95/14/

The behavior is the desired behavior, which allows the center column in a 3 column layout to take up all the space available AND still allow the text inside of it to overflow into ellipsis when shrunk far enough. This seems to work due to max-width: 0, but why does it produce this effect?

What's so special about max-width: 0 in this case?

.row {
  width: 100%;
  display: table;
}
.col {
  position: relative;
  min-height: 1px;
  border: 1px #000 solid;
  display: table-cell;
}
.x {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
  max-width: 0;
}

<div class="row">
  <div class="col">abc</div>
  <div class="col x">test blah blah blah blah blah zzzzz.</div>
  <div class="col">def</div>
</div>

Answer 1

Note: It's not just max-width:0, it's any width less than the text content's width.

The mixture of display: table-cell, max-width, and width:100% make an interesting situation that the specifications don't explicitly cover. However, by making some observations and thinking, we can understand why we have the same behavior across all major browsers.

max-width:0 tries to make the element width 0, of course, meaning that everything should be overflow. However, the combination of display: table-cell and width:100%, as seen in the linked demo, override that command for the div (maybe for the same reason why max-width does not apply to table rows) for the most part. As such, the element displays itself like it would without the max-width:0 until the width of the div is no longer large enough to contain all of the text content.

A thing to note before we continue is that the text itself by default has a width that is set by the characters inside of it. It's kind of a child element of the parent div, though there are no tags.

This innate width of the text content is the reason why max-width:0 is needed to create the effect. Once the width of the div is no longer large enough to contain all of the content, the max-width:0 property enables the width to become less than the width of the text content, but forces the text that can no longer fit to become overflow of the div itself. Thus, since the div now has text overflow and text-overflow: ellipsis is set, the text overflow is ellipsed (if that's a word).

This is very useful to us because otherwise we couldn't make this effect without a lot of messy JavaScript. Use case demo

_{Note: This answer describes the behavior and gives some insight as to why this is the case. It doesn't cover how display:table-cell overrides part of the max-width's effect.}

Answer 2

This is not to be a complete answer, but a contribution.

What's so special about max-width: 0 in this case?

I'm not sure, but the cell seems to give another chance to adjust. (maybe this, algorithm point 2)

According to my experiments applies only replaced elements with intrinsic width. In this case the text block has intrinsic width by white-space: nowrap.

Items without intrinsic width fit well without using max-width: 0.

http://jsfiddle.net/rnrlabs/p3dgs19m/

* {
    box-sizing: border-box;
}
.table {
    display: table;
    width: 300px;
}
.row {
    width: 100%;
    display: table-row;
}
.col {
    border: 1px #000 solid;
    display: table-cell;
}
.a {
    min-width: 80px;
}
.x {
    background: #0cf;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}
.y {
    max-width: 0;
}
.z {
    white-space: nowrap;
}

<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x">
            <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidth" />
        </div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y">
            <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidthPlusMaxWidth" />
        </div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x z">Intrinsic Width due white-space property set to nowap.</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y z">Intrinsic Width due white-space property set to nowap and Max-Width</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x"><span>IntrinsicWidthduenospacesintextandblahIntrinsicWidthduenospacesintextandblah</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y"><span>IntrinsicWidthduenospacesintextandMaxWidth</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y">Non Intrinsic Width. Inline, non-replaced elements. <strong> Inline, non-replaced elements. </strong> Inline, non-replaced elements.</div>
        <div class="col">end</div>
    </div>
</div>

Answer 3

I think BoltClock's comment on Zach Saucier's answer - that the behaviour is undefined - is a good reason to avoid relying on the fact that today's browsers happen to exhibit the desired behaviour.

Many people (like me) will arrive at this question not because they have an academic interest in what max-width: 0 means in this case, but because they want to know whether it's OK to use that hack to get the ellipsis to show for text in a table cell, and FWIW I think the answer is: "not really".

A better way to get the ellipsis to work in that case is to use "table-layout: fixed" on the <table> element, as suggested in this answer.