align flex auto cells in sibling flex rows

Question

I wonder if it is possible to have a flex grid with flex auto on the cells instead of flex 1 but that the cells of the neighboring rows still align. I created a small demonstration of the problem. When you click then button you switch from flex: 1 to flex: auto on call cells.

const styles = document.documentElement.style;
const flexMode = document.querySelector('span')

let flexAuto = true;

function flexToggle(e) {
  let flex =  flexAuto ? 'auto' : '1' 
  styles.setProperty("--flex-mode", flex);
  flexAuto = !flexAuto
  flexMode.textContent = flex
}

:root{
  --flex-mode: 1
}
html, body {
  width: 100%;
}

table {
  
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 50%;
  min-height: 0;
  max-height: 8rem;
  border: dashed thin;
}

thead, tbody {
  display: flex;
  flex-direction: column;
}

tbody {
  flex: 1;
  overflow: auto;
}

tr {
  display: flex;
  padding: .3rem;
  border-bottom: blue solid;
}  

th, td {
  flex: var(--flex-mode);
  text-align: left;
  border: solid thin;
  padding: 0.2rem 0.5rem;
}

thead tr {
  padding-right: 21px;
}

<table>
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>short</th>
      <th>long in this cell</th>
      <th>medium</th>
    </tr>
        <tr>
      <th>lil short</th>
      <th>long content in this cell</th>
      <th>medium sized</th>
    </tr>
        <tr>
      <th>almost short</th>
      <th>very long content in this cell</th>
      <th>medium sized stuff</th>
    </tr>

  </tbody>
</table>

<p>
  <button onclick="flexToggle(event)">Change Flex Mode</button>
  Flex Mode: <span>1</span>
</p>

The answer to your question is no, you cannot get columns to align across rows using `flex: auto`. The reason is that `flex: auto` sizes the cell based on its content (which obviously varies between cells / rows). But `flex: 1` doesn't factor in content, treating all space on the row as free space, allowing columns to align across rows. See the duplicate for full details. — Michael Benjamin, Apr 19 '20 at 16:12

score -2 · Answer 1 · answered Apr 19 '20 at 12:08

You need to set the width for those cells

th, td {
    width: calc(100% / 3);
}

Because flex:auto will adjust the width according to the content.

const styles = document.documentElement.style;
const flexMode = document.querySelector('span')

let flexAuto = true;

function flexToggle(e) {
  let flex =  flexAuto ? 'auto' : '1' 
  styles.setProperty("--flex-mode", flex);
  flexAuto = !flexAuto
  flexMode.textContent = flex
}

:root{
  --flex-mode: 1
}
html, body {
  width: 100%;
}

table {
  
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 50%;
  min-height: 0;
  max-height: 8rem;
  border: dashed thin;
}

thead, tbody {
  display: flex;
  flex-direction: column;
}

tbody {
  flex: 1;
  overflow: auto;
}

tr {
  display: flex;
  padding: .3rem;
  border-bottom: blue solid;
}  

th, td {
  width: calc(100% / 3);
  flex: var(--flex-mode);
  text-align: left;
  border: solid thin;
  padding: 0.2rem 0.5rem;
}

thead tr {
  padding-right: 21px;
}

<table>
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>short</th>
      <th>long in this cell</th>
      <th>medium</th>
    </tr>
        <tr>
      <th>lil short</th>
      <th>long content in this cell</th>
      <th>medium sized</th>
    </tr>
        <tr>
      <th>almost short</th>
      <th>very long content in this cell</th>
      <th>medium sized stuff</th>
    </tr>

  </tbody>
</table>

<p>
  <button onclick="flexToggle(event)">Change Flex Mode</button>
  Flex Mode: <span>1</span>
</p>

Your solution doesn't make sense. It's the same as flex 1. That's what they are in the beiginning already. You just force it to not be anything else. — The Fool, Apr 19 '20 at 14:45

align flex auto cells in sibling flex rows

1 Answers1