Create a unique margin using CSS only that will appear at the bottom of a flex-row container that scrolls

I'm trying to create a horizontal scroller with margins between each item and consistent margins at both ends. However, I'm noticing that the margin at the end of the container seems to be disappearing somehow.

Is there a way to maintain the margin at the end without adding a 'spacer' element?

.scroller {
  display: flex;
  overflow-x: auto;

  width: 300px;
}

.item {
  flex: none;
  border: 1px solid red;

  width: 100px;
  height: 50px;

  margin-right: 20px;
}

.item:first-child {
  margin-left: 20px;
}
<div class="scroller">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
htmlcssscrollflexbox

Answer №1

Is this the kind of thing you're looking for?

.carousel {
  white-space: nowrap;
  overflow-x: scroll;
  width: 300px;
}

.item {
  display: inline-block;
  border: 1px solid blue;
  width: 100px;
  height: 50px;
  margin-right: 20px;
}

.item:first-child {
  margin-left: 20px;
}
<div class="carousel">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer №2

A solution to this problem does not require using a pseudo element for spacing.

All that is needed is a container element:

.container {
  width: 300px;
  overflow-x: auto;
}

.scroller {
  display: inline-flex;
}

.item {
  border: 1px solid red;
  width: 100px;
  height: 50px;
  margin-right: 20px;
}

.item:first-child {
  margin-left: 20px;
}
<div class="container">
  <div class="scroller">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

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

Twitter Bootstrap navbar-collapse can be seen overlapping navbar-header section, causing a

I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...

htmlcsstwitter-bootstrap

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

I am facing an issue in my Angular2 application where I am trying to display an image in Uint8Array format. The problem arises when the image size exceeds ~300Kb, resulting in a 'Maximum Call Stack Exceeded' error. Currently, I have been able to ...

javascripthtmlangularimage-rendering

Is there a way to perfectly center this image with the rest of my text content?

Seeking assistance in aligning this image to the right alongside other text content. Currently, when the code is executed, the image is pushed down and positioned below the text on the right side. Ideally, I would like the image to be aligned evenly with ...

htmlcssflexbox

Issue: The error message "articales.forEach is not a function" is indicating

app.get('/', (req, res) => { const articales = { title: 'Test Articles', createdAt: Date.now(), description: "Test Description" } res.render('index', { articales : articales }) }) <div ...

javascripthtmlnode.jsejs

Set the value of a static file uploader using jQuery

I am having trouble retrieving the name of an existing file in a file uploader. I have a sample in jsfiddle demonstrating what I have tried. http://jsfiddle.net/shree/a4PKG/3/ However, when I click GetImage, the file uploader always remains empty. T ...

jqueryhtml

Difficulty encountered in setting the background image to cover the entire screen

I'm facing difficulties while creating a parallax website. Specifically, I'm having troubles with CSS. Here's the HTML code: <div id="skrollr-body"> <div class="subnav"> <ul id="nav"> ...

jqueryhtmlcss

Creating a custom button in PHP

Currently, I am in the process of developing a shopping cart feature. One key requirement is to send both the product ID and the desired quantity chosen by the user to another file named cart.php. Below is an excerpt from my code snippet: for($i=0;$i< ...

phphtmlmysqlformsform-submit

issues with functionality in purecss drop down menu

I have been struggling to create a vertical drop-down menu using the purecss library without success. purecss.io/menus/ This is what my CSS code looks like: <div class="pure-menu custom-restricted-width"> <ul class="pure-menu-list"> ...

htmlcss

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

cssimagesvgnext.jsnext-images

Creating a navigation bar that stays fixed at the top of

Hey there, currently I am utilizing a combination of jquery and css to affix my navigation menu at the top when scrolled. However, the problem is that my navigation menu is positioned beneath a div with a height set in viewport units (vh). The jquery scr ...

javascripthtmlcss

What are some ways to enhance the appearance of the initial two items in a list through CSS?

Is it possible to enhance the appearance of the first 2 elements in a list using CSS for IE8 compatibility? Here is an example of the format: <ul id="list1" style="margin-left:-20%;font-weight:bold" > <li class="xyz"> Element1 </li> ...

css

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

javascripthtmlnode.jsangular

Drop-down selection triggering horizontal auto-scroll

Within my div element, I have a table with dropdowns. The div is set up to be horizontally scrollable. To create the dropdown functionality, I utilized Harvesthq Chosen. Let me provide some context. In Image 1, you'll notice that I've scrolled ...

javascriptjqueryhtmlcssharvest

Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

htmlcssscrollpopupcss-position

Can the information from a form be automatically submitted to the server upon selection?

<div class="modal-body modal-body-step-2"> <form action="prenotazioni.php" method="post"> <div class="input-group"> <input type="radio" name="spettacolo" value="Lo Schiaccianoci">Lo Schiaccianoci<br> ...

htmlajaxforms

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

javascriptcssreactjs

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

javascriptjqueryhtmlcsstwitter-bootstrap

Having issues with customizing the design of MaterialUI Accordion header

Link to my code sandbox project I am encountering issues with the styling in my Accordion Heading. My Accordion Contents are set up like this: <Accordion heading1= { <DishItem name="Döner Teller Spezial" price="13,60€"/> ...

cssreactjsmaterial-uiaccordion

Modify the color scheme of an HTML webpage

Looking to enhance my HTML page with a new feature. The page is responsive and currently using Bootstrap CSS and JS. My goal is to allow users to change the color of the page dynamically by selecting a background or text color. Check out this example link ...

javascriptjqueryhtmlcssplugins

Comparison of universal and descending selector in CSS

Can someone clarify when to use the universal selector versus the descendant selector in CSS? I've tried finding a clear explanation, but haven't come across one that explains the difference and when each should be used: div * .test{ color: re ...

htmlcsscss-selectors