2 Column Table

2 Column Layout - Max height set by second - First column cannot be larger than second column - First column is scrollable when overflowing

by Robert Dodd

HTML

<div class='container'>
<div class="row">
  <div class='nav-cell'>
    <div class='nav-wrap'>
      <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
      </ul>  
    </div>
  </div>
  <div class="content-cell">
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    If this gets longer, right most follows<br>
    End
  </div>
</div>
</div>

CSS

.container {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
  width: 100%;
}

.content-cell {
  display: table-cell;
  background: orange;
  width: 80%;
}

.nav-cell {
  display: table-cell;
  width: 30%;
  position: relative;
}

.nav-wrap {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}