html - 当父级嵌入显示 :table? 时，如何使 100% 宽度的 div 的子级水平滚动

Question

我的网站左侧有侧边栏，右侧有主要内容。布局结构是用display:table的div来完成的。 (只要效果相同，我愿意改变它)。

现在在主要内容部分，我想要一个可水平滚动的区域。该区域需要是主要内容宽度的 100%，而不是将其推得更宽。但是，它没有按预期工作，我不明白为什么它会扩大内容区域。

这是 jsfiddle 中的模型:https://jsfiddle.net/yhpjx907/1/

取消注释一些额外的元素，您就会明白我所说的扩展主要内容的意思。

有什么建议吗？

Answer 1

使用flexbox:

左侧与右侧高度相同。左侧 宽度:30%。右侧 宽度:70%。右侧内联元素也在一个 flexbox 中，它有 overflow-x: scroll。

例子

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #dfdfdf;
}

.container {
  display: flex;
  width: 500px;
  margin: 0 auto;
}

.container ul {
  list-style: none;
}

.container>aside {
  width: 30%;
  min-width: 150px;
  background: #cfcfcf;
  color: #fff;
}

.container>.main {
  width: 70%;
  border: 5px solid #cfcfcf;
  background: #fff;
}

.container .items {
  background: red;
  display: flex;
  overflow-x: scroll;
}

.container .items>div {
  padding: 20px;
  margin: 10px;
  font-size: 24px;
  background: #0f0;
}

<div class="container">
  <aside class="sidebar">
    <ul>
      <li>List 1</li>
      <li>List 2</li>
      <li>List 3</li>
      <li>List 4</li>
      <li>List 5</li>
    </ul>
  </aside>
  <div class="main">
    <h1>Header</h1>
    <div class="content">
      <div class="items">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
      </div>
    </div>
    <h1>Footer</h1>
  </div>
</div>