div doesn't scroll horizontally on overflow

Question

I have the following:

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

If contents div overflows, the horizontal scroll doesn't show up. The vertical scroll is still there, hidden, but there, and that is exactly what this div scrolls, the vertical, not the horizontal. What am I missing here?

WitkowskiMichau · Accepted Answer · 2017-11-02 20:24:00Z

I modified your example.

Display block, child need to be biger than parent. Not sure about position absolute, but seem not necessary here.

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

well, it doesn't solve the problem, but it gives me a clue... thanks!

Igor Mandello · Accepted Answer · 2017-11-02 20:29:24Z

0

First of all: using percentage to width makes the div size relative to the parent, on container case, the body and html.

To the container div be scrollabe, you have to do something like that:

body {
    min-width: 120%;
}

answered Nov 2, 2017 at 20:29

Igor Mandello

12 bronze badges

Collectives™ on Stack Overflow

div doesn't scroll horizontally on overflow

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related