Ячейка таблицы не изменяет размер правильно, если содержит прокручиваемый префикс

Question

У меня возникли проблемы с правильной настройкой ячейки таблицы на варианте макета «Святой Грааль».

Я вижу другое поведение, когда основное содержание отображается как block vs table-cell. Я сузил проблему до того, что прокручиваемый блок pre с длинным текстом приводит к тому, что ширина ячейки ведет себя странно. См. Код и скрипку ниже. Он показывает, что не работает вместе с желаемым поведением.

Отметьте, что display: table-cell является обязательным требованием. Я не могу просто использовать стиль для рабочего примера (и я не могу использовать flexbox либо).

ВАЖНО: Чтобы увидеть желаемое поведение изменения размера, вы должны изменить размер окна и смотреть, как два примера, ведут себя по-разному. Убедитесь, что вы нажмете Full Page на результат фрагмента, чтобы сделать это.

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

Чтобы увидеть, что блок кода является вопрос, вы можете раскомментировать /* display: none; */ и видеть, что content колонка изменяет правильно (хотя и без нужного блока кода).

Answer 1

Вы можете просто решить вопрос, добавив и width: 600%; в свой стиль для #main. Кроме того, чтобы применить максимальную ширину, мы можем добавить обертку вокруг главного div (с именем #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>