Scrollable table cell

sort of!

by kmbro

HTML

<div id="outer">
  <div id="left">
    table
  </div>
  <div id="right">
    <div class="inner">
      <p>the quick brown fox jumps over the lazy dog</p>
    </div>
  </div>
</div>
<hr/>
<div id="outer2">
  <div id="left2">
    absolute
  </div>
  <div id="right2">
    <div class="inner">
      <p>the quick brown fox jumps over the lazy dog</p>
    </div>
  </div>
</div>
<hr/>
<div id="outer3">
  <div id="left3">
    float
  </div>
  <div id="right3">
    <div class="inner">
      <p>the quick brown fox jumps over the lazy dog</p>
    </div>
  </div>
</div>

CSS

#outer {
  display: table;
  width: 100%;
  box-sizing: border-box;
  /* include padding in width */
  border: solid black 2px;
  padding: 2px;
}

#left {
  display: table-cell;
  width: 100px;
  background: grey;
}

#right {
  display: table-cell;
  min-width: 0;
  background: yellow;
}

.inner {
  box-sizing: border-box;
  /* include padding in width */
  width: 100%;
  border: solid red 2px;
  padding: 2px;
  overflow-x: scroll;
}

p {
  white-space: nowrap;
}

#outer2 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* include padding in width */
  border: solid black 2px;
  padding: 2px;
}

#left2 {
  position: absolute;
  width: 100px;
  height: 100%;
  background: grey;
}

#right2 {
  box-sizing: border-box;
  /* include padding in width */
  width: 100%;
  padding-left: 100px;
  background: yellow;
}

#outer3 {
  width: 100%;
  box-sizing: border-box;
  /* include padding in width */
  border: solid black 2px;
  padding: 2px;
}

#left3 {
  float: left;
  width: 100px;
  height: 100%;
  /* oops - not 100% of outer3 */
  background: grey;
}

#right3 {
  overflow: auto;
  /* works with hidden too */
  background: yellow;
}