The horizontal scrolling feature will not activate

I meticulously followed the instructions in a YouTube tutorial to implement this code. What's puzzling is that while the code works perfectly for the person in the video, allowing the grid items to scroll to the right, it doesn't have the same effect when I try to run it on my end.

If someone could take a look and help me figure out what may be causing this discrepancy, I would greatly appreciate it.

.wrapper {
  max-height: 120px;
  border: 1px solid #ddd;
  display: flex;
  overflow-x: auto;
}

.wrapper::-webkit-scrollbar {
  width: 0px;
}

.wrapper .item {
  min-width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background-color: #ddd;
  margin-right: 2px;
}
<div class="wrapper">
  <div class="item">box-1</div>
  <div class="item">box-2</div>
  <div class="item">box-3</div>
  <div class="item">box-4</div>
  <div class="item">box-5</div>
  <div class="item">box-6</div>
</div>

Answer №1

After removing the prefixed rule, the scroll bar will appear.

It seems like the only adjustment needed to be made (other adjustments I made are optional).

.wrapper {
  display: flex;
  overflow-x: auto;
}

.wrapper .item {
  flex: 0 0 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background-color: #ddd;
  margin-right: 2px;
}
<div class="wrapper">
  <div class="item">box-1</div>
  <div class="item">box-2</div>
  <div class="item">box-3</div>
  <div class="item">box-4</div>
  <div class="item">box-5</div>
  <div class="item">box-6</div>
</div>

Check out the jsFiddle demo here

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

Setting up conditional select options in Angular

I need to create a select list with specific options based on the data in an object. For instance, if the data property is 0, I want to display an option as 0 with the ability to switch to 1, and vice versa. However, when rendered in HTML, no option value ...

Position tables on the right side of adjacent tables

There are two tables named id="BFCategories" and "BMICategories". Additionally, there are two other tables with id="BFTable" and "BMITable" BFCategories should come after BFTable, while BMICategories should follow BMITable. How can I a ...

Adjust the button's color even after it has been clicked

My goal is to update the button's color when it's clicked. I found some examples that helped me achieve this, but there's an issue - once I click anywhere outside of the button, the CSS class is removed. These buttons are part of a form, and ...

Arranging elements in columns using Bootstrap

I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other. I need them to be displayed side by side Here is the code I am using: <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layo ...

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

Disabling the ability to edit the rightmost portion of an input number field

I am looking for something similar to this: https://i.stack.imgur.com/ZMoNf.jpg In this case, the % sign will be shown in the input field by default and cannot be changed or removed. The user is only able to modify the number to the left of the % sign. P ...

Using checkboxes to select all in AngularJS

Recently, I started working with Angularjs and came across some legacy code. I am trying to figure out a way to select all checkboxes once the parent checkbox is selected. Here is the parent checkbox: <div class="form-group"> <label for="test ...

"Positioned at the top of the page is the alert box, with the

I'm looking to add an alert at the top of my webpage containing a form for visitors to enter their phone number. Currently, I have a "alert alert-info" div with the form inside it placed at the top of my body tag, which works perfectly. However, when ...

Can someone provide guidance on utilizing parentheses in HTML code?

I am facing an issue in my Angular project while using the WordPress API. The problem lies in the API address structure which includes "" like this: <img src="{{importantvideo.better_featured_image.media_details.sizes.["covernews-med ...

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the ...

Automatically showcase images from a directory upon webpage loading

Is there a way to modify my code so that the images from the first directory are displayed on the page when it loads, instead of waiting for a menu option to be clicked? The page looks empty until a menu option is selected, and I would like the images to s ...

Creating a background image with linear gradients in Rails 5

Does anyone know how to implement a background image with linear gradients in CSS? Here is the code snippet I have: .main-bg-back-1{ background:linear-gradient(180deg,#22263f,rgba(33,41,94,.96)),url(../img/app/download-bg.jpg) no-repeat; backgroun ...

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

What is the method for creating a curved CSS Pseudo element background?

Currently, I have implemented a red pseudo element as part of the background for certain sections on my website. Although everything is functioning correctly, I am interested in transitioning the straight line to a curved one instead. Does anyone know ho ...

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-con ...

Validation does not occur when the submit button has an ng-click event attached to it

This is the form I created: <form action="" ng-controller="forgotCtrl as forgot" name="forgotForm"> <div class="form-group row"> <label for="email" class="col-sm-2 form-control-label">Email address</label> ...

developing a dropdown menu feature

I'm struggling with a small issue related to my drop-down menu function. My goal is to hide the visibility of a menu tab after it has been clicked for the second time. Below is the code snippet I've been working on: HTML:- <nav class="clea ...

Another drop-down is hiding the bootstrap-select drop-down from view

What could be causing some parts of the first drop-down menu to be hidden by another drop-down menu below in the code snippet provided? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv= ...

Attempting to extract only the text content from a specific div using XPath

I am currently facing a challenge in writing a script to extract the title element from a poorly coded webpage. The developer who created this website did not use any classes, only div elements. Below is a snippet of the source code I am trying to scrape: ...

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Recently, we have started incorporating styles into our React components using the makeStyles hook from Material-UI. Instead of traditional CSS, we are now using JavaScript objects to define styles. An example of this is shown below: const useStyles = ma ...