css - 在 div 内水平滚动

Question

我有当前的 CSS:

#inner { 
    height: 50em;
    width : 20em;
    overflow: auto;
    float : left;
    padding :10px;
    margin : 20px;
    white-space: normal;
}

#outer{
    width: 60em;
    white-space:nowrap;
    border: 13px solid #bed5cd;
    overflow-x: auto;
    overflow-y: hidden;
}

我的 html 代码如下:

<div id="outer">
<div id="inner">
data
</div>
<div id="inner">
data
</div>
<div id="inner">
data
</div>
. . . .
</div>

我可以看到水平滚动。但问题是，我不想将 outer.width 硬编码为 60em。我想将其保留为 auto。但这以垂直滚动结束。

知道我在哪里犯了错误吗？

Answer 1

在外部 div 上设置 white-space:nowrap 和 overflow:auto。

在内部 div 上设置 display:inline-block，并移除 float。

#outer {
  border: 13px solid #bed5cd;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
#inner {
  display: inline-block;
  white-space: normal;
  width: 20em;
  padding: 10px;
  margin: 20px;
}

<div id="outer">
  <div id="inner">
    data
  </div>
  <div id="inner">
    data
  </div>
  <div id="inner">
    data
  </div>
</div>