html - 如何使 div 适合所有可用宽度，甚至隐藏滚动？

Question

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

Fiddle link

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

.pane {
  display: table;
}

updated fiddle link

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

有没有纯 html/css 解决方案？

Answer 1

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

但是由于您还需要一个溢出，因此您可以在两者之间添加一个额外的包装器，以允许这些子项增长到超出窗口的宽度并匹配最宽的窗口，我给了它。 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/