It is not possible to resize a table cell correctly if it contains a scrollable preliminary

Question

I’m having trouble setting the table cell correctly on the Holy Grail layout option.

I see a different behavior when the main content is displayed as blockvs table-cell. I narrowed down the problem to the point where a scrollable block prewith long text causes the cell width to behave strangely. See code and fiddle below. It shows that it does not work with the desired behavior.

Please note that this display: table-cellis a requirement. I cannot just use the style for a working example (and I cannot use flexbox).

IMPORTANT: To see the desired resize, you must resize the window and see how the two examples behave differently. Make sure you click Full Pageon the result of the fragment 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>

Run codeHide result

To see that this code block is a problem, you can uncomment /* display: none; */and see that the column contentresizes correctly (although without the right code block).

Answer 1

You can simply solve the problem by adding table-layout: fixed;and width: 600%;to your style for #main. In addition, to apply the maximum width, we can add a wrapper around the main div (with the name #mainContainer).

:

#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>

Hide result