html - 如何制作一个 div 以适应所有可用宽度，甚至隐藏在滚动中？

Question

我有一个包含两个面板的页面。第二个面板包含一些大表格，因此即使包含包装内容也无法在全宽窗口中显示。我添加了一个水平滚动条来解决这个问题，但似乎 div 不适合大表。

Fiddle link

经过一些研究，我发现了如何通过此 css 更改强制第二个面板适应表格大小:

.pane {
  display: table;
}

updated fiddle link

但是还有一个问题。第一和第二面板的宽度不同。如何强制第一个面板采用所有可用宽度，即使它隐藏在水平滚动中？

是否有任何纯 html/css 解决方案？

Answer 1

按照建议，使用 display:table;，它将允许容器根据内容收缩/扩展并超出窗口的大小。

但由于您还需要一个 overflow，您可以在两者之间添加一个额外的包装器，以允许这些 child 超出窗口的宽度并与最宽的窗口匹配，我给了它 。 buffer 作为类名来赋予它一些意义:

例子:

.list {
  overflow-x: auto;
}
.buffer {
  display: table;
}
.pane {
  border: 1px solid red;
  margin: 15px 0;
}
.pane .head {
  width: 100%;
  background: #959595;
}
.pane .body {
  width: 100%;
}
.pane .body table {
  border: 1px solid green;
}

<div class="list">
  <div class="buffer">
    <!-- this a buffer container to allow to beyond window's width if displayed as table element *-->
    <div class="pane">
      <div class="head">
        Pane 1 header
      </div>
      <div class="body">
        Some body
      </div>
    </div>
    <div class="pane">
      <div class="head">
        Pane 2 header
      </div>
      <div class="body">
        <table width="100%">
          <tbody>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
              <td>Fourth</td>
            </tr>
            <tr>
              <td>content</td>
              <td>content</td>
              <td>content</td>
              <td>some_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super_super big content</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/8cepsL09/6/