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

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

For hours now, I've been struggling to make Lighthouse work in Chrome for my initial PWA project. I feel completely lost as nothing seems to be making sense despite the basic code I have included below. The issue arises when I load the page normally ...

Ways to conceal a label and the input field when a radio input is switched on

In my HTML file, I have coded an application form using CSS to style it. Some of the tags have been removed for display purposes. <label>Member</label> <input type="radio" name="Answer" value="Yes"/>Yes<br/> <input type="radio" ...

Divide data into an HTML table and merge it with header information

My HTML form contains an interactive HTML table where users can add/delete rows. I am sending this data to a Google Sheet and need to store the row information with corresponding header details. Each time a user submits the form, a new row is added to the ...

personalized options for initiating and concluding html audio component

I am currently facing an issue with my html audio element that plays a track. The setup is quite straightforward: <audio controls loop="loop"> <source type="audio/wav" src="song.wav"> </audio> However, I need to create custom start ...

Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)? https://i.sstatic.ne ...

Retrieving Files using Ajax Across Different File Types

I recently came across the following code snippet: DOM_imgDir = "img/UI/DOM/"; fileextension = ".jpg"; $.ajax({ url: DOM_imgDir, success: function (data) { $(data).find("a:contains(" + fileextension + ")").each(function () { filename = thi ...

Adding div elements using checkbox switch

In this code snippet, my aim is to display costs based on checkbox selection and generate corresponding totals in the bottom row when the checkboxes are toggled. The goal is to allow users to choose relevant items and have the total cost calculated accordi ...

Tips for eliminating the space within the '<td>' border tags

I am attempting to replicate the first table, but I keep getting results similar to the second table instead. My approach involved creating a table and filling the <td> tags with labels. However, after setting the borders to dark, there are unwanted ...

What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Currently, I am faced with a situation in which I need to locate a WebElement based on its CSS property, specifically the background-color. I successfully crafted the JQuery script below to pinpoint the element using the firefox console: $('.search-b ...

Sending FormData from React.js to an Express.js backend results in loss of data

I encountered a problem while developing a book library management CRUD system using React v18. The issue arises when attempting to add data to my MongoDB Atlas database. Whenever I pass the formData to axios.post through Redux, the req.body on the backend ...

Ways to immediately display an uploaded image as the background on a canvas

Using TypeScript, I am attempting to set an uploaded image as the background of a canvas. However, I am facing an issue where the image only loads properly after the user has uploaded it two times. How can I ensure that the image has finished loading befor ...

Is there a way to execute Javascript in Django without revealing static files?

When setting up payments on my Django site using Stripe, I realized that the .js file is visible under Sources in the developer tools when inspecting elements on any browser. This presents a potential security risk as anyone can access this file. How can ...

Unraveling and interpreting all incoming requests to my Node.js application

Looking for a simple method to identify and decipher all encoded characters in every URL received by my Node.js application? Is it possible to achieve this using a middleware that can retrieve and decode symbols such as & ? ...

Handling Website Downtime with PHP Simple HTML DOM Parser

I have been extracting data from a government website for health updates in Turkey. However, if the site experiences downtime or fails to load, my own website stops displaying any content after fetching and parsing the news. Is there a way to optimize th ...

setting the child div's margin in relation to its parent div

Here is my HTML: <div class='mainDiv'> <div class='subDiv'></div> </div> This is the corresponding CSS code: .mainDiv { margin-top: 200px; width: 700px; height: 800px; background-color: red ...

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...

Struggling to find a solution for altering font color with jQuery while creating a straightforward menu

I'm having trouble changing the color of the active button pressed to "color:white;"... Here is the link to the jsfiddle: http://jsfiddle.net/wLXBR/ Apologies for the clutter in the file, my css is located at the bottom of the CSS box (Foundation cod ...

Putting Images Next to Each Other - Arranging Them to Be Responsive

I have a pair of images on my webpage that I've aligned next to each other. To enhance the mobile user experience, I want these two images to stack on top of each other when viewed on smaller screens. If anyone can provide guidance on creating respon ...