I'm facing a challenge with resizing my table cell correctly within a variation of the "holy grail" layout.
The behavior differs when displaying my main content as a block versus a table-cell. The issue seems to stem from having a scrollable pre block with lengthy text causing an abnormal width adjustment in the cell. Refer to the provided code and fiddle below showcasing what's not working and the expected behavior.
It is essential to note that using display: table-cell is a necessity in this scenario, ruling out alternatives such as applying styles from a functional example (and flexbox is also not an option).
IMPORTANT:
For observing the desired resizing behavior, adjusting the window size is required to witness the differing behaviors of the two examples. Please ensure to click on Full Page in the snippet result for optimal viewing.
#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 isolate the code block as the root cause, uncommenting /* display: none; */ will showcase proper resizing of the content column (albeit without the specific code block).