Table 单元格在包含可滚动预置时无法正确调整大小

Question

我无法让我的 table 单元格在 "holy grail" 布局的变体上正确调整大小。

当我的主要内容显示为 block 与 table-cell 时，我看到了不同的行为。我已经将问题缩小到这样一个事实，即带有长文本的可滚动 pre 块会导致单元格宽度表现异常。请参阅下面的代码和 fiddle。它显示了不符合预期行为的内容。

请注意，display: table-cell 是一项要求。我不能简单地使用工作示例的样式（我也不能使用 flexbox）。

重要提示： 要查看所需的调整大小行为，您必须调整 window 的大小并观察两个示例的行为有何不同。 确保点击摘要结果上的 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 的样式中添加 table-layout: fixed; 和 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>

Table 单元格在包含可滚动预置时无法正确调整大小

Table cell not resizing correctly when containing scrollable pre

html

css

pre

tablecell