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

我修改了你的例子。

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

.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>

Answer 2

首先：对宽度使用百分比使得 div 大小相对于父级、容器情况、主体和 html。

容器 div 是滚动条，你必须做这样的事情：

body {
    min-width: 120%;
}

div 溢出时不水平滚动

div doesn't scroll horizontally on overflow

html

css

overflow