How to apply right margin/padding to this horizontal scrolling element?

Question

I have a horizontally scrolling div that has a left and right padding of 100px. The left padding seems to be working fine. However, the right side is not visible. What's more, the 50px right margin on the last section is also missing.

What am I missing? Why are both the right padding and margin not respected?

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

Update

Per @chaitanya swami's suggestion, the following is a workaround. I'm still wondering why the above doesn't work as expected.

body {
  margin: 0;
}

#wrapper {
  width: 100vw;
  overflow: auto;
}


#carousel {
  display: flex;
  padding: 0 100px;
  width: calc(100vw + 400px);
}

.slide {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div id="wrapper">
  <div id="carousel">
    <section class="slide"></section>
    <section class="slide"></section>
    <section class="slide"></section>
  </div>
</div>

What you're saying in the comment you mean to say you don't want right side padding from the main div or else that blocks should be in the centre. — Arshiya Khanam, Jan 24 '19 at 05:50

score 5 · Answer 1 · answered Jan 24 '19 at 05:33

5

You'll need a parent div for that. you will need to define the width of your parent div, which is currently is 100vw. you can achieve what you want by setting the width 900px or whatever the total width be. Hope that helps.

answered Jan 24 '19 at 05:33

chaitanya swami

420
2
12

Thanks, this is helpful. I'm still wondering why the right padding and last right margin aren't being applied. – Raphael Rafatpanah Jan 24 '19 at 05:42
@RaphaelRafatpanah may have to do with display flex. – Jonny Jan 24 '19 at 07:10

score 1 · Answer 2 · answered Jan 24 '19 at 05:53

You can also use for css like this

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

<style>
 body {
  margin: 0;
}

div {
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow: auto;
  padding: 0 100px;
  box-sizing: border-box;
}

section {
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 300px;
  margin: 0 15px;
  height: 300px;
  background: red;
}
</style>

Andy Hoffman · Accepted Answer · 2019-01-24T08:07:21.023

Without adding a few additional children, your options are limited.

First is a solution that includes no additional HTML children.

Remove flex from the parent.
Remove outer padding rule from parent.
Add white-space: nowrap to the parent.
Make the children sections inline-block.
In order to deal with the unwanted gap space (a symptom of inline-block), set the font-size of the parent to 0, restoring it in the children elements to the base font size
Add a left/right margin of 100px to first/last children, respectively.

One step I took to keep the CSS a bit more organized was to assign the 100px outer spacing to a native CSS variable, since that value is used in more than one place. I think this helps keep the code more readable.

:root {
  --outer-spacing: 100px;
}

body {
  margin: 0;
}

div {
  width: 100vw;
  overflow: auto;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 0;           /* Prevent unwanted inline-block gap spacing */
}

section {
  font-size: 16px;        /* Restore base font size */
  width: 300px;
  margin: 0 15px;
  height: 300px;
  max-height: 100vh;
  background: red;
  display: inline-block;
}

section:first-of-type {
  margin-left: var(--outer-spacing);
}

section:last-of-type {
  margin-right: var(--outer-spacing);
}

<div>
  <section></section>
  <section></section>
  <section></section>
</div>

http://jsfiddle.net/oxdbpq62/3/

Last, is a solution that is simpler, but adds a span before and after the original children. Note: I removed the explicit widths and added them to each shorthand flex declaration in the flex-basis slot.

body {
  margin: 0;
}

div {
  width: 100vw;
  display: flex;
  overflow: auto;
  box-sizing: border-box;
}

.gutter {
  flex: 0 0 100px;
}

section {
  flex: 0 0 300px;
  max-height: 100vh;
  margin: 0 15px;
  height: 300px;
  background: red;
}

<div>
  <span class="gutter"></span>
  <section></section>
  <section></section>
  <section></section>
  <span class="gutter"></span>
</div>

http://jsfiddle.net/jw0qz2t3/

How to apply right margin/padding to this horizontal scrolling element?

Update

3 Answers3