스크롤 가능한 사전을 포함 할 때 표 셀의 크기가 올바르게 조정되지 않습니다.

Question

"성배"레이아웃의 변형에서 표 셀의 크기를 올바르게 조정하는 데 문제가 있습니다.

주 콘텐츠가 block 대 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

#main의 스타일에 및 width: 600%;을 추가하면 문제를 간단하게 해결할 수 있습니다. 또한 max-width를 적용하기 위해 주 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>