Show inline-block elements within a div that has a variable width, allowing for horizontal scrolling

Currently, my layout is as follows:

https://jsfiddle.net/0r6cdwht/2/

Is there a way to enable horizontal scrolling when the items displayed inside the div overflow?

I've done some research and came across a solution that suggested using

white-space: nowrap;

on the container div. However, this approach would cause the entire page to scroll in my specific scenario.

Answer №1

When positioning the element 200px to the left, consider utilizing the formula calc(100% - 200px) to determine the maximum width of the element. To dynamically add a scrollbar based on the number of child items, include overflow: auto and white-space: nowrap:

Revised Demo

.devices {
    max-width: calc(100% - 200px);
    white-space: nowrap;
    overflow: auto;
}

Answer №2

overflow:auto; property can be applied within the specified class. However, it will not be visible without a defined width inside the DIV element.

Do you understand?

I inserted overflow:auto; into your code snippet, but it did not take effect until I eliminated any unnecessary spaces from the content.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the art of transitioning between DIV elements

I am looking to implement a rotating three-card display on click, and have come up with the following code: $('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); ...

Is there a way to create a sequence where text fades in only after the previous text has completely faded out?

Currently, I am using JQuery to create a continuous slideshow of text values. However, after some time, multiple texts start to display simultaneously, indicating a timing issue. Even when hidden, the problem persists. My code includes 3 strings of text. ...

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

I'm trying to create a clickable effect using CSS only with labels and inputs. However, I am struggling to replicate the same effect on my ::after pseudo-element without moving the input outside of the label. I attempted using flexbox order property b ...

Tabs within the AutoComplete popup in Material-UI

Would it be feasible to showcase the corresponding data in the AutoComplete popover using Tabs? There could be potentially up to three categories of data that match the input value, and my preference would be to present them as tabs. Is there a way to in ...

"Bootstrap Carousel veers off from center alignment and aligns to the left instead

I found some code on a different website to put together a Bootstrap 5 carousel. Unfortunately, the alignment of my carousel is off as it is positioned to the left and I would prefer for it to be centered within the container. <div class="container ...

What are some ways to remove scroll bars from an iframe?

I'm having trouble with scroll bars appearing in my iframe when inside a fancy box. I have tried everything to remove them without success. For example, you can view the issue here: http://jsfiddle.net/t4j3C/ No matter what I try, nothing seems to w ...

The JQuery chosen dropdown experiences a visual issue when placed inside a scrollbar, appearing to be "cut

Good day, I've been using the jQuery "chosen" plugin for a dropdown menu, but I encountered an issue with it being located in a scrollable area. The problem is that the dropdown items are getting cut off by the outer div element. I have provided a si ...

How can I resolve the issue of background-size not functioning properly?

Struggling to set a background-image with the 'cover' size property inside a div. Despite trying different values for background-size, the image always shows up in full size within the div. I've searched for similar answers on SO, but nothi ...

Creating a webpage that seamlessly scrolls and dynamically loads elements

Currently, I am working on a dynamic website that loads new elements as you scroll down the page. Here is an example of the HTML code: <div>some elements here</div> <div id="page2"></div> And this is the JavaScript code: var dis ...

Styling images with text alignment in CSS

I'm trying to figure out how to align an image to the left, some text to the top right, and some text to the bottom right. The parent div contains a background image. <div id="parent" style="background: url(bg.jpg) repeat-x left top"> <i ...

In the iOS app when the Ionic HTML5 select keypad is opened, a bug causes the view to scroll upwards and create empty space after tapping the tab

I am currently working with Ionic v1 and AngularJS, utilizing ion tabs: <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Home Tab --> <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home"> <ion-nav ...

CSS prefers to remain within its original controller and does not want to be uploaded from any other source

My webpage includes headers and footers with CSS in them. Strangely, when I load the view using one controller, the CSS displays correctly. But when I try to load the same view using a different controller, the CSS doesn't appear at all. What could b ...

How can I add a Facebook HTML5 Like Button to AJAX Pages?

I am trying to implement the Facebook HTML5 Like Button on my Ajax views. On my main page, this is what I have: <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById( ...

Focus on targeting dynamic IDs such as #event_rules_attributes_0_interval, #event_rules_attributes_1_interval, etc. using CSS3 styling

Styling input tags using their IDs can be very convenient due to the higher precedence weight they hold compared to classes. For instance, I set a default width for input.text elements within a specific container: .details .metadata input.text { width: 2 ...

Location-based services: Updating the position of a Google Maps marker without refreshing the entire map interface

How can I update only the marker on a map when the device is in motion or has increased accuracy? I want to reload the map when the position changes, but only move the marker. Below is the code snippet that I currently have: if (navigator.geolocation) { ...

code snippet showing HTML element's visibility

I have a component in my HTML that I need to hide: <div class="hid" > <select > <option value="M">Male</option> <option value="F">Female</option> </select> </div> To hide the component, I added ...

Firefox experiencing trouble handling flexbox overflow

Having some trouble with a test project that involves using flexbox. The task at hand is to create a dashboard with multiple lists of cards arranged side-by-side with infinite overflow. I was able to achieve this layout, however, the issue arises when eac ...

I am struggling to make my Bootstrap 5 Navbar transparent. Can anyone help me figure this out?

I've been struggling with my Bootstrap Navbar, which appears as white no matter what I do. I've tried numerous solutions from Stack Overflow to make it transparent without any luck. Even after setting the background to transparent and ensuring t ...

Challenges with Adjusting Background Opacity in CSS

My text has a white background with an opacity of .3, but it's affecting the foreground due to CSS repositioning. Even though the HTML is in a different division, I struggle with certain aspects of CSS and would appreciate guidance from those more exp ...

What is the best way to add multiple classes to an HTML element?

Can a single HTML container have more than one class assigned to it? For example, would the following code work: <article class="column wrapper"> ...