Is It Possible To Get Flexbox To Work Inside Label?

I'm using flexbox to display a text label along with a numeric value in a narrow column, so that the text is truncated with ellipsis if it doesn't fit. It worked fine, until I had

Solution 1:

That's because, by default, tables use the automatic table layout:

The CSS 2.1 spec doesn't define that layout mode, but suggests a (non-normative) algorithm, which reflects the behavior of several popular HTML user agents.

According to that algorithm, the table's width will only be treated like a minimum width, and the real width will be enough so that the content does not overflow:

Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box.

Since you have white-space: nowrap, the MCW will be the width of the full text.

To avoid that, you can set the initial width of your first span to 0:

.linespan:first-child {
  width: 0;
}

.wrapper {
  width: 150px;
}
.table {
  display: table;
}
.table > div {
  display: table-cell;
}
.line {
  display: flex;
  width: 100%;
}
.linespan:first-child {
  width: 0;
  white-space: nowrap;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linespan:last-child {
  flex-shrink: 0;
  margin-left: 5px;
}

<divclass="wrapper"><divclass="line"><span>Very long label text</span><span>12345</span></div></div><divclass="table wrapper"><div><divclass="line"><span>Very long label text</span><span>12345</span></div></div></div>

Alternatively, you may want to try the fixed table mode, which is properly defined in the spec (and thus more reliable), is usually faster, and solves the problem too.

table-layout: fixed;

.wrapper {
  width: 150px;
}
.table {
  display: table;
  table-layout: fixed;
}
.table > div {
  display: table-cell;
}
.line {
  display: flex;
  width: 100%;
}
.linespan:first-child {
  white-space: nowrap;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linespan:last-child {
  flex-shrink: 0;
  margin-left: 5px;
}

<divclass="wrapper"><divclass="line"><span>Very long label text</span><span>12345</span></div></div><divclass="table wrapper"><div><divclass="line"><span>Very long label text</span><span>12345</span></div></div></div>