Wrap text in stretchable tables

Question

I have two tables on either side of a centered div. I'd like the content in the left-hand table to be aligned on the right, and the content in the right-hand table to be aligned on the left. I managed to do so by creating an extra column in the left-hand table and setting width: 100% on the first cells and white-space: nowrap on the second cells.

The problem is, because of the nowrap property, the content overflows when the tables are too small. I tried setting word-wrap: break-word in vain. How can I force the content to fit the table width?

Here is my code so far: JSFIDDLE

#container {
    height: 180px;
    display: flex;
    flex-flow: row;
    align-items: stretch;
    border: 1px dotted gray;
}

table {
    flex: 1;
    display: flex;
    margin: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px dashed blue;
}

tbody {
    display: block;
    margin: auto 0;
}

td {
    padding: 5px;
    border: 1px solid red;
}

#left td:nth-child(1){
   width: 100%;
}

#left td:nth-child(2) {
    white-space: nowrap;
}

#list, #center {
    width: 100px;
    margin: 10px;
    border: 1px dotted gray;
}

<div id="container">
    <div id="list"></div>
    <table id="left">
        <tbody>
            <tr>
                <td></td>
                <td>Lorem ipsum dolor sit amet</td>
            </tr>
            <tr>
                <td></td>
                <td>Valar morghulis</td>
            </tr>
            <tr>
                <td></td>
                <td>One fish, two fish, red fish, blue fish</td>
            </tr>
        </tbody>
    </table>
    <div id="center"></div>
    <table id="right">
        <tbody>
            <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
            <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
            <tr><td>Would you kindly help me out</td></tr>
            <tr><td>Supercalifragilisticexpialidocious</td></tr>
            <tr><td>Alpha</td></tr>
            <tr><td>Bravo</td></tr>
            <tr><td>Charlie</td></tr>
            <tr><td>Delta</td></tr>
            <tr><td>Echo</td></tr>
            <tr><td>Foxtrot</td></tr>
            <tr><td>Golf</td></tr>
        </tbody>
    </table>
</div>

Answer 1

How about this: DEMO

Remove the extra column and add margin-left:auto to left tbody

Remove the nowrap

#left tbody{
    margin-left:auto;
}

Answer 2

There are multiple ways to align flex items inside the flex container along the main axis.

• justify-content

  The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved.

  #left {
    justify-content: flex-end;
  }
  

  #container {
    height: 180px;
    display: flex;
    border: 1px dotted gray;
  }
  table {
    flex: 1;
    display: flex;
    margin: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px dashed blue;
  }
  tbody {
    display: block;
    margin: auto 0;
  }
  td {
    padding: 5px;
    border: 1px solid red;
  }
  #left {
    justify-content: flex-end;
  }

  <div id="container">
    <table id="left">
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
        </tr>
        <tr>
          <td>Valar morghulis</td>
        </tr>
        <tr>
          <td>One fish, two fish, red fish, blue fish</td>
        </tr>
      </tbody>
    </table>
    <table id="right">
      <tbody>
        <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
        <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
        <tr><td>Would you kindly help me out</td></tr>
        <tr><td>Supercalifragilisticexpialidocious</td></tr>
        <tr><td>Alpha</td></tr>
        <tr><td>Bravo</td></tr>
        <tr><td>Charlie</td></tr>
        <tr><td>Delta</td></tr>
        <tr><td>Echo</td></tr>
        <tr><td>Foxtrot</td></tr>
        <tr><td>Golf</td></tr>
      </tbody>
    </table>
  </div>

• flex-direction

  The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction that flex items are laid out in.

  If you use row-reverse (or column-reverse) instead of row (or column), you will swap the main-start and main-end directions.

  #left {
    flex-direction: row-reverse;
  }
  

  #container {
    height: 180px;
    display: flex;
    border: 1px dotted gray;
  }
  table {
    flex: 1;
    display: flex;
    margin: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px dashed blue;
  }
  tbody {
    display: block;
    margin: auto 0;
  }
  td {
    padding: 5px;
    border: 1px solid red;
  }
  #left {
    flex-direction: row-reverse;
  }

  <div id="container">
    <table id="left">
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
        </tr>
        <tr>
          <td>Valar morghulis</td>
        </tr>
        <tr>
          <td>One fish, two fish, red fish, blue fish</td>
        </tr>
      </tbody>
    </table>
    <table id="right">
      <tbody>
        <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
        <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
        <tr><td>Would you kindly help me out</td></tr>
        <tr><td>Supercalifragilisticexpialidocious</td></tr>
        <tr><td>Alpha</td></tr>
        <tr><td>Bravo</td></tr>
        <tr><td>Charlie</td></tr>
        <tr><td>Delta</td></tr>
        <tr><td>Echo</td></tr>
        <tr><td>Foxtrot</td></tr>
        <tr><td>Golf</td></tr>
      </tbody>
    </table>
  </div>

• Auto margins

  Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

  #left > tbody {
    margin-left: auto;
  }
  

  #container {
    height: 180px;
    display: flex;
    border: 1px dotted gray;
  }
  table {
    flex: 1;
    display: flex;
    margin: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px dashed blue;
  }
  tbody {
    display: block;
    margin: auto 0;
  }
  td {
    padding: 5px;
    border: 1px solid red;
  }
  #left > tbody {
    margin-left: auto;
  }

  <div id="container">
    <table id="left">
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
        </tr>
        <tr>
          <td>Valar morghulis</td>
        </tr>
        <tr>
          <td>One fish, two fish, red fish, blue fish</td>
        </tr>
      </tbody>
    </table>
    <table id="right">
      <tbody>
        <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
        <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
        <tr><td>Would you kindly help me out</td></tr>
        <tr><td>Supercalifragilisticexpialidocious</td></tr>
        <tr><td>Alpha</td></tr>
        <tr><td>Bravo</td></tr>
        <tr><td>Charlie</td></tr>
        <tr><td>Delta</td></tr>
        <tr><td>Echo</td></tr>
        <tr><td>Foxtrot</td></tr>
        <tr><td>Golf</td></tr>
      </tbody>
    </table>
  </div>

• Inserting pseudo-elements with a positive flex grow factor

  The flex grow factor determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

  #left::before {
    content: '';
    flex-grow: 1;
  }
  

  #container {
    height: 180px;
    display: flex;
    border: 1px dotted gray;
  }
  table {
    flex: 1;
    display: flex;
    margin: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px dashed blue;
  }
  tbody {
    display: block;
    margin: auto 0;
  }
  td {
    padding: 5px;
    border: 1px solid red;
  }
  #left::before {
    content: '';
    flex-grow: 1;
  }

  <div id="container">
    <table id="left">
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet</td>
        </tr>
        <tr>
          <td>Valar morghulis</td>
        </tr>
        <tr>
          <td>One fish, two fish, red fish, blue fish</td>
        </tr>
      </tbody>
    </table>
    <table id="right">
      <tbody>
        <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td></tr>
        <tr><td>The quick brown fox jumps over the lazy dog</td></tr>
        <tr><td>Would you kindly help me out</td></tr>
        <tr><td>Supercalifragilisticexpialidocious</td></tr>
        <tr><td>Alpha</td></tr>
        <tr><td>Bravo</td></tr>
        <tr><td>Charlie</td></tr>
        <tr><td>Delta</td></tr>
        <tr><td>Echo</td></tr>
        <tr><td>Foxtrot</td></tr>
        <tr><td>Golf</td></tr>
      </tbody>
    </table>
  </div>