Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Question

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Displayed below is a layout with two nested divs, both featuring automatic vertical scrolling.

Is there a CSS technique available to show the inner scrollbar while maintaining the inner div at 100% width?

https://i.stack.imgur.com/HSKHH.png

div {
  background: rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 400px;
  overflow-y: auto
}
#outer { height: 400px; }
#inner { height: 200px; }
button { float: right; color: #F60}

<button onclick="document.getElementById('outerContent').innerHTML='smaller content does not need to scroll #inner should still be 100% width of #outer'">TRY WITH SMALLER CONTENT</button>

<div id='outer'>
  <span id='outerContent'>Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll</span>

  <div id='inner'>INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV
    ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CAN'T SEE THE SCROLLBAR
  </div>
</div>

html css

Answer 1

Answer №1

Absolutely, it is entirely feasible.

To achieve this effect, you must implement width:auto and display:block on the #inner element. Though these styles are typically applied automatically by most (if not all) browsers, they may need to be explicitly set in your case due to the fixed width specified in line 3 of your CSS (div { width: 200px }), which overrides default behavior where #inner adjusts to its parent's width.

This issue can be resolved by only setting width:200px on #outer, without applying it to both divs:

/* Remove fixed width from div... */
div {
  background: rgba(0, 0, 0, 0.2);
  height: 400px;
  overflow-y: auto
}

/* ...and apply it solely to #outer */
#outer { height: 400px; width: 200px; }
#inner { height: 200px; }

See the solution in action on this fiddle

Alternatively, you can maintain width:200px for both divs (as currently done) and then revert it for #inner using width:auto.

/* Keep fixed width on both divs... */
div {
  background: rgba(0, 0, 0, 0.2);
  height: 400px;
  width: 200px;
  overflow-y: auto
}

/* ...and reset width to default for #inner */
#outer { height: 400px; }
#inner { height: 200px; width: auto; }

View the alternate approach in this fiddle

Answer 2

Absolutely, it is entirely feasible.

To achieve this effect, you must implement width:auto and display:block on the #inner element. Though these styles are typically applied automatically by most (if not all) browsers, they may need to be explicitly set in your case due to the fixed width specified in line 3 of your CSS (div { width: 200px }), which overrides default behavior where #inner adjusts to its parent's width.

This issue can be resolved by only setting width:200px on #outer, without applying it to both divs:

/* Remove fixed width from div... */
div {
  background: rgba(0, 0, 0, 0.2);
  height: 400px;
  overflow-y: auto
}

/* ...and apply it solely to #outer */
#outer { height: 400px; width: 200px; }
#inner { height: 200px; }

See the solution in action on this fiddle

Alternatively, you can maintain width:200px for both divs (as currently done) and then revert it for #inner using width:auto.

/* Keep fixed width on both divs... */
div {
  background: rgba(0, 0, 0, 0.2);
  height: 400px;
  width: 200px;
  overflow-y: auto
}

/* ...and reset width to default for #inner */
#outer { height: 400px; }
#inner { height: 200px; width: auto; }

View the alternate approach in this fiddle

Answer 3

Answer №2

To achieve the desired effect, simply set the #inner to have a style of width:auto.

This adjustment will allow the block element to expand as much as needed while still displaying a scrollbar when necessary.

div {
  background: rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 400px;
  overflow-y: auto
}
#outer { height: 400px; }
#inner { height: 200px; width:auto;}
button { float: right; color: #F60}

<button onclick="document.getElementById('outerContent').innerHTML='smaller content does not need to scroll #inner should should still be 100% width of #outer'">TRY WITH SMALLER CONTENT</button>

<div id='outer'>
  <span id='outerContent'>Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll</span>

  <div id='inner'>INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV
    ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR
  </div>
</div>

Answer 4

To achieve the desired effect, simply set the #inner to have a style of width:auto.

This adjustment will allow the block element to expand as much as needed while still displaying a scrollbar when necessary.

div {
  background: rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 400px;
  overflow-y: auto
}
#outer { height: 400px; }
#inner { height: 200px; width:auto;}
button { float: right; color: #F60}

<button onclick="document.getElementById('outerContent').innerHTML='smaller content does not need to scroll #inner should should still be 100% width of #outer'">TRY WITH SMALLER CONTENT</button>

<div id='outer'>
  <span id='outerContent'>Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll</span>

  <div id='inner'>INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV
    ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR
  </div>
</div>

Overlapping dynamic content causing CSS nested scrollbars to clash at full width of 100%

Answer №1

Answer №2

Similar questions

Having trouble getting the on:dblclick event to trigger on a row within a list using S

Angular UI grid: Arranging numbers in a straight line at the decimal point

Ways to center a div with position:relative vertically on the page

Restrict the child's height to the remaining space within the parent container

HTML5 for Bulk Video Upload

There was a problem retrieving the product information from the API

Tip: Using jQuery to Wrap Characters Based on Count

How about determining the map size based on Divine proportions?

The make-xx-column() mixins in Bootstrap are malfunctioning

Alignment vertically in a Razor view

Show the HTML content fetched from the database using PHP

Unable to navigate to specific tab in Laravel 6 navigation tabs using URL parameter (e.g. myweb/pages#tab1)

Triggering a JavaScript function when the mouse moves off an element

Hover effect on two divs changing states

What's the best way to ensure an endless supply of copied elements with identical classes to the clipboard?

Looking for browser prefixes for the `text-align` property? We've got you covered! Use `-webkit-right` for Google Chrome and Safari, `-moz-right` for Firefox, and `-o-right` for Opera. But what about

Display all elements on a webpage using Javascript without the need for scrolling

Attempting to implement a disappearing effect upon submission with the use of JavaScript

What could be preventing this src tag from loading the image?

Is it possible to incorporate half an image into a slideshow using html and css?