html - 包含可滚动预置时，表格单元格无法正确调整大小

Question

我无法让我的表格单元格在“ chalice ”布局的变体上正确调整大小。

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

请注意，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

您可以通过添加 table-layout: fixed; 和 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>