Table cell not resizing correctly when containing scrollable pre

Question

I'm having trouble getting my table cell to resize correctly on a variant of the "holy grail" layout.

I'm seeing different behavior when my main content is displayed as a block vs table-cell. I've narrowed down the problem to the fact that a scrollable pre block with long text causes the cell width to behave strangely. Please see the code and fiddle below. It shows what's not working along with the desired behavior.

Note that display: table-cell is a requirement. I cannot simply use the style for the working example (and I cannot use flexbox either).

IMPORTANT: To see the desired resize behavior, you must resize the window and watch how the two examples behave differently. Make sure you click Full Page on the snippet result to be able to do this.

#main {
  display: table;
  margin: 0 auto;
}

#content {
  display: table-cell;
  max-width: 600px;
  background-color: red;
}

.code-block {
  /* display: none; */
  margin: 0px 20px;
  padding: 10px;
  border: 1px black solid;
  overflow: auto;
}

#content-working {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  background-color: green;
}

<div id="main">
  <div id="content">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
</div>

<!-- desired behavior below -->

<div id="main-working">
  <div id="content-working">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
</div>

To see that the code block is the issue, you can uncomment /* display: none; */ and see that the content column resizes correctly (albeit without the desired code block).

Answer 1

You can simply solve the issue by adding table-layout: fixed; and width: 600%; to your style for #main. Also, to apply the max-width, we can add a wrapper around the main div (named #mainContainer).

The result is as following snippet:

#mainContainer {
  max-width: 600px; 
  margin: 0 auto; /* make center */
}

#main {
  display: table;
  margin: 0 auto;
  table-layout: fixed;
  width: 100%; /* without this, table-layout:fixed not work! */
}

#content {
  display: table-cell;
  /*max-width: 600px; set in parent div */
  background-color: red;
}

.code-block {
  /* display: none; */
  margin: 0px 20px;
  padding: 10px;
  border: 1px black solid;
  overflow: auto;
}

#content-working {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  background-color: green;
}

<div id="mainContainer">
 <div id="main">
  <div id="content">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
 </div>
</div>

<!-- desired behavior below -->

<div id="main-working">
  <div id="content-working">
    <h1>
      Content Area
    </h1> Some other words on the page. Hey look, some code:
    <pre class="code-block"><code>code that is potentially long and must be scrolled to be seen in its entirety</code></pre>
  </div>
</div>