html - div 在溢出时不会水平滚动

Question

我有以下内容:

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.contents {
  position: absolute;
  float: right;
  bottom: 0;
  width: 100%;
  top: calc(100% - 37px);
  overflow-x: auto;
  overflow-y: hidden;
}

<div class='container'>
  <div class='contents'>
     The contents of the 'contents' div might vary its width, not its height
  </div>
</div>

如果 contents div 溢出，则水平滚动不会显示。垂直滚动仍然存在，隐藏，但确实存在，而这正是该 div 滚动的内容，垂直的，而不是水平的。我在这里缺少什么？

Answer 1

我修改了你的例子。

显示 block ，子项需要比父项大。不确定绝对位置，但在这里似乎没有必要。

.container {
   width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
}

.contents {
  display: inline-block;
   float:left;
   height:120px;
   width: 1000px;
   display: block;
}

<div class='container'>
   <div class='contents'>
      The contents of the 'contents' div might vary its width, not its height
      The contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' di
      s' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofs' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents ofv might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its heightThe contents of the 'contents' div might vary its width, not its height
   </div>
</div>