I have to convert this to a slider

[codeispoetry]

Padding is on a child of artcur still based on --slide-across value all the containers of the slide that are visible are unable to take equal spaces last one us having a compromised protion.

[PaulOB]

100% + 1px border is bigger than 100%. Use box-sizing to contain padding and borders within the overall dimensions.

.artcur {
  flex: 0 0 calc((100%) / var(--slides-across));
  border: 1px solid red;
  align-items: center;
  box-sizing:border-box;
}

[codeispoetry]

@PaulOB

100% + 1px border is bigger than 100%. Use box-sizing to contain padding and borders within the overall dimensions.

But this doesn’t work →

.oslider {
  display: flex;
  flex-direction: row;
  gap: 20px;
  box-sizing:border-box;
}

Box sizing Property does not incorporate Gap Property?

[snadyleiby]

Slightly reworked example…

Full Page View
https://codepen.io/Snady_Leiby/full/gOQxpmz

Editor View
https://codepen.io/Snady_Leiby/pen/gOQxpmz

[PaulOB]

@codeispoetry

But this doesn’t work →

That wasn’t in your original.

Unfortunately the gap property doesn’t get accounted for in the box-sizing rule so you would have to do it manually as shown by @snadyleiby above.

You could automate it a bit by using a custom property for the gap so that you don’t forget when you change it.

e.g. In the codepen from @snadyleiby

Add these extra rules:

root {
  --gap:1.25em;
 }
.oslider div { 
   flex: 0 0 calc(100% / var( --slides-across ) - var(--gap) );
   gap: var(--gap);
 }

I’ve only shown the changes,

[snadyleiby]

@PaulOB

root {
  --gap:1.25em;
 }

Thank you for your excellent suggestion for improvement.
I have edited the codepen with your coding.

[PaulOB]

@snadyleiby

Thank you for your excellent suggestion for improvement.

You’re welcome

I was also thinking you could probably lose that left and right margin and do something like.

--gap: calc(var(--slides-across) - 1) * var(--flex-gap) / var(--slides-across);

and then use:

flex: 0 0 calc(100% / var(--slides-across) - var(--gap));

But maybe that complicates it too much

[codeispoetry]

For example, if the gap is 20px and there are 4 visible div then actually the gaps are taking only 60px space and not 80px space. That modified ode does that took this into account?

[PaulOB]

@codeispoetry

That modified ode does that took this into account?

Yes that’s exactly what my last post achieves.

[PaulOB]

@PaulOB

Yes that’s exactly what my last post achieves.

I’ve added it to your page but I removed the silly extra-contain divs as they are not needed and complicate the html unnecessarily.

.