スクロール可能なプリを含むときに表のセルが正しくサイズ変更されない

Question

"聖杯"のバリエーションで表のセルのサイズを正しく変更できない。

私の主なコンテンツがblockと表示されているときには、異なる動作が見られます。これは、table-cellです。私は、長いテキストを持つスクロール可能なブロックpreがセルの幅を奇妙に振るうという事実に問題を絞り込んだ。以下のコードとフィドルをご覧ください。これは、何が目的の動作と一緒に動作していないかを示します。

display: table-cellが必須であることに注意してください。私は単純に作業用のスタイルを使用することはできません（そして私はflexboxも使用できません）。

重要： は希望サイズ変更動作を確認するには、ウィンドウのサイズを変更しての2つの例では、異なる動作をどのように監視する必要があります。 スニペット結果で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>