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).

@Oriol open the snippet in 'Full page', then resize the browser window width to below 600px, the red box will not be resized according to the browser width — S.Serpooshan, Jan 29 '17 at 11:18

S.Serpooshan · Accepted Answer · 2017-01-29T11:32:15.327

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>

@kukkuz i tested it and it works when resizing browser, and it also respect the max-width:600px applied to #main. (Do you mean when browser width is smaller than 600px or not work in general?) — S.Serpooshan, Jan 29 '17 at 10:47
@kukkuz oh, i did a mistake when i replace width by max-width! i edited the code, please take a look again and give feedback — S.Serpooshan, Jan 29 '17 at 11:14
Thanks @S.Serp! This definitely gets me somewhere. I'll go ahead and mark this as the solution.I'll also have a fixed-width sidebar to the right of `content` (as another table-cell). I guess I'll just have to add the sidebar width to the outer container max width explicitly, unless you can think of a better way... — Andrew M., Jan 29 '17 at 20:42

Table cell not resizing correctly when containing scrollable pre

1 Answers1