Why Does Flex-Box Work with a Div, But Not a Table

Why doesn't flex-grow: 1 work for a table in Safari?

Thanks to @Michael_B, I now understand that the table works in a rather peculiar way with flexbox styling.

Why does flex-box work with a div, but not a table?

It seems I must use width: 100% instead of flex-grow: 1. It's not the end of the world, since the table is at the deepest level in the dom hierarchy, but it's still a bummer.

Layout a flex box similar to a table?

If the content you are going to present is of type tabular data, then a table is the proper way.

HTML 5.1 W3C Recommendation, 1 November 2016, 4.9 Tabular data

Given that you can't, or don't want to, alter the markup, this can be done using CSS Table, and with that easily swap between any display type such as flex, block, etc., or even float, using media query etc.

I also removed the <div class="line-break"></div> element, since you don't need, though if it is rendered by a component or similar, leaving it as is won't cause any problem.

Using CSS Table

section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

Flexbox with table and absolute positioning not working in IE 10, 11 or Edge

The solution was to force the table and the cells to have a height of 100%.

This then fixed the relative issue in IE within flexbox

<div style="display: flex">  <div style="flex:1">  <table style="width:100%; height: 100%"><tr><td>1st line<br/>2nd line<br/>3rd line<br/>4th line<br/>5th line<br/>6th line</td>    <td style="vertical-align:top; position: relative; height: 100%">1st line<br/>2st line<div style="position:absolute; bottom: 0">position bottom</div></td></tr>      </table></div></div>

Is it possible to set a td with display flex to be full height, or have different CSS to achieve the same effect?

Set the widths so that the right <span> takes up 2.3rem (width: 1.15rem; margin-left: 1.15rem) and the left <span> takes up the rest of the <td> width. Note the em are replaced by rem because they are not affected by casscading styles and inheritance:

span:first-of-type {
  width: calc(100% - 2.3rem);
}

In the example, all <td> and <span> are the same to demonstrate how the styles behave with different lengths of text in the left <span>. Tested it in moblie dimensions and it is always centered vertically and the dots always at the far right never shifting. The shape is always round as well due to changing em to rem and adding height: 1.15rem;. This is much better than flexbox.

:root {
  font: 2ch/1 'Segoe UI';
}

table td {
  border: 1px solid black;
}

span {
  display: inline-block;
  border: 0;
  vertical-align: middle;
}

span:first-of-type {
  width: calc(100% - 2.3rem);
}

span.right {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 1.15rem;
  border-radius: 50%;
}

span.red {
  background-color: red;
}

span.green {
  background-color: green;
}

<table>
  <tbody>
    <tr>
      <td class="flex"><span>Left </span><span class="right red"> </span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td class="flex"><span>Left side longer </span><span class="right red"> </span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td class="flex"><span>The right way to do it </span><span class="right green"> </span>
      </td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
</table>

Flex-box discrepancy between Chrome and Firefox

I don't see any reason why this code would work. Your height: 1px trick is a hack. It's non-standardized code. So browser behavior can vary.

If you must keep this code structure, consider switching from height: 1px to min-height: 1px.

Flexbox, float or display table

I think this would be a solution. But I needed an auxiliar wrapper for the side elements.

You cant set a minimum width (arbitrary) on the side containers. I have set this to 10px, just to give the idea.

.flex-container {  display: flex;  overflow: hidden;}.side {  flex: 10px 1 0;  background-color: powderblue;}.center {  flex: auto 0 0;  background: tomato;}.side div {  background: tomato;  display: inline-block;}.flex-item {  padding: 5px;  height: 100px;  line-height: 100px;  color: white;  text-align: left;}

<div class="flex-container">  <div class="flex-item side">    <div>Lorem ipsumd dolor sit amet</div>  </div>  <div class="flex-item center">center content</div>  <div class="flex-item side">    <div>float left after center</div>  </div></div>