Scrolling Horizontally, Tailored to Fit Content's Width

Question

Scrolling Horizontally, Tailored to Fit Content's Width

I am working with a page layout that consists of a wrapper, content div, and two item divs. The wrapper has a width of 320px, while the items together measure around 600px. I want the two item divs to display inline, allowing the content to scroll horizontally. Currently, the items are set to display as inline-block, but I need a solution to adjust the content width dynamically based on the items' total width to enable horizontal scrolling.

It is important to note that the wrapper has a fixed width and height, and vertical scrolling is disabled with overflow-y set to hidden. Only horizontal scrolling is desired, hence the overflow-x set to scroll.

If you check the JSFiddle example provided in the link, you will notice that the red divs stack vertically. Adjusting the content width manually to enable horizontal scrolling is not practical since the number of elements inside the content div is uncertain beforehand.

html css horizontal-scrolling

Answer 1

Answer №1

To prevent wrapping, apply the white-space:nowrap; property to the .content class

.content{
    width: auto;
    white-space:nowrap; 
}

Check out the example at http://jsfiddle.net/kh5k7/1/

Answer 2

To prevent wrapping, apply the white-space:nowrap; property to the .content class

.content{
    width: auto;
    white-space:nowrap; 
}

Check out the example at http://jsfiddle.net/kh5k7/1/

Answer 3

Answer №2

Here is an example of how you can achieve this:

.container {
    overflow-x: auto;
    overflow-y: hidden;
}

.text {
    width: auto;
    white-space: nowrap;
}

.box {
    display: inline-block;
}

Answer 4

Here is an example of how you can achieve this:

.container {
    overflow-x: auto;
    overflow-y: hidden;
}

.text {
    width: auto;
    white-space: nowrap;
}

.box {
    display: inline-block;
}

Scrolling Horizontally, Tailored to Fit Content's Width

Answer №1

Answer №2

Similar questions

Styling Dynamic HTML Content in Angular: Tips and Tricks

The altered variable refuses to show up

When whitespace is entered as the value for an input type=email, the change event does not fire

Tips for capturing changes in a "count" variable and executing actions based on its value

Achieve the appearance of table-like alignment without the need for traditional tables

What is the best way to retrieve a PDF file from another website and showcase it on our own site without any redirection?

Fluid and static dimensions in CSS

At what point is the rendering process of ng-switch completed?

Revamp the Bootstrap 4 Form Check: Rearrange Options from left-to-right and top-to-bottom to top-to-bottom and left-to-right

Discover how to utilize Firebug in Java to access a node's CSS properties

Troubleshooting Spring's difficulty in locating resource files (css, jsp...)

Assigning attributes to each letter in a pangram

Can you help me identify the issue with this code? It works fine when I don't include the dimensions, but as soon as I add them, the entire page disappears

What is the best method for retaining just a specific portion of HTML code within Webbrowser VB.Net?

CSS Only Sidebar Dropdown (without using Bootstrap)

Click on the ng-click attribute to access the HTML page

The background-size property fails to function properly on mobile devices

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image

Creating an Array of dynamically generated elements using jQuery

Troubleshooting Issue: Unable to Collapse Bootstrap Responsive Navbar Button with Custom CSS Modifications