the div refuses to scroll left or right when overflowing

Question

the div refuses to scroll left or right when overflowing

I am encountering the following issue:

.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 content within the 'contents' div may vary in width, but not in height.
  </div>
</div>

When the contents div overflows, the horizontal scroll bar does not appear. Although the vertical scroll bar is present, it remains hidden and still allows scrolling, only in the vertical direction. What could be missing in this setup?

html css overflow

Answer 1

Answer №1

I made some adjustments to your provided example.

For the display block, it is important that the child element be larger than the parent element. It appears that using position absolute may not be necessary in this context.

.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
      (Content of 'contents' div repeated multiple times for demonstration purposes)
   </div>
</div>

Answer 2

I made some adjustments to your provided example.

For the display block, it is important that the child element be larger than the parent element. It appears that using position absolute may not be necessary in this context.

.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
      (Content of 'contents' div repeated multiple times for demonstration purposes)
   </div>
</div>

Answer 3

Answer №2

One important point to note is that when using percentages for width, the size of the div becomes relative to its parent container, often the body or html.

In order to make a container div scrollable, you can achieve it by doing something similar to the following:

body {
    min-width: 120%;
}

Answer 4

One important point to note is that when using percentages for width, the size of the div becomes relative to its parent container, often the body or html.

In order to make a container div scrollable, you can achieve it by doing something similar to the following:

body {
    min-width: 120%;
}

the div refuses to scroll left or right when overflowing

Answer №1

Answer №2

Similar questions

The getElementBy method is failing to pass the value in the document

Achieve button highlighting by hovering over the card - Bootstrap 5

Storing checkbox status in Angular 7 with local storage

Can you provide the distribution of percentages for each heading tag in HTML?

Positioning of the footer using CSS: A query

Modify the background color of the body when hovering over items in the unordered list using CSS

Forwarding to a specific webpage

Responsive HTML grid with a distinct line separating each row

The three.js library encountered an ERROR 404 ( File Not Found ) when trying to import an existing file

Whenever I enter a narrative into my text box, it must interact with this API

Creating dynamic HTML elements for each section using JavaScript

How to enable seeking functionality for mp3 files with PHP

Using jQuery to add emoticons to a div element

iPhone Safari Mobile Browser experiencing issues with sms: and mailto: functionalities

Prevent the ability to capture photos using the HTML input file feature within an iOS application

Styling Material UI height in select elements (React)

Problem with Bootstrap 4 grid specifically occurring in Safari browser

Is there a way to retrieve href and src links using mouseover() without encountering the "ERR_FILE_NOT_FOUND" error? I am interested in accessing href and src through mouseover()

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

How can I use React Native to align two text tags differently within the same row?