Using flexbox on table header <th> elements

Question

I have a scenario which requires a complex layout within table header <th> elements. I want to approach the problem by making the <th> elements a flex container.

However, if I start with this minimal example

and change the <th> elements to display: inline-flex, the table becomes:

I.e., the column width of the header no longer matches the column width of the <td> elements.

How can I make use of flexbox inside the header without messing up column rendering?

Edit to clarify the use case: My <th> elements will eventually contain multiple elements, with left+right alignment (similar to this question). In addition I want to be able to control the stretch behavior (that's why flexbox instead of just floats).

---

Example jsfiddle:

<table>
  <thead>
    <tr>
      <th class="column-header">A</th>
      <th class="column-header">B</th>
      <th class="column-header">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

table, th, td {
  border: 1px solid #000;
}

.column-header {
  display: inline-flex;
}

Answer 1

My elements will eventually contain multiple elements, with left+right alignment. In addition I want to be able to control the stretch behavior (that's why flexbox instead of just floats).

In that case, you need to use a div inside each th and flex that.

table,
th,
td {
  border: 1px solid #000;
}

.column-header div {
  display: flex;
  justify-content: space-between;
}

<table>
  <thead>
    <tr>
      <th class="column-header">
        <div><span>A</span><span>A</span></div>
      </th>
      <th class="column-header">
        <div><span>B</span><span>B</span></div>
      </th>
      <th class="column-header">
        <div><span>C</span><span>C</span></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something</td>
      <td>Something</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>