CSS Grid + Swiper Wrapper - wrong width calculated

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 4.4.2 from CDNJS

• Platform/Target and Browser Versions: Latest Chrome on macOS (confirmed issue is happening in Latest Safari also)

• Live Link or JSFiddle/Codepen or website with isssue: https://codepen.io/anon/pen/pqJBWX (Also raised with others: https://codepen.io/meredevelopment/pen/yorRMm and here on your forums: http://idangero.us/swiper/forum/#!/?css grid)

What you did

A basic CSS grid setup with 3 columns setup on a wrapper. Carousel is set up within the 3rd column with a width of 1fr (which should take up 1fr of the remaining space of the max-width container). For code example see codepen showing issue. Code is direct replica of code in my development build.

Expected Behavior

Swiper wrapper is to take up the remaining space of the container instead of overflowing with the correct slidesPerView visible

Actual Behavior

Swiper wrapper is overflowing, with slidersPerView being ignored. Wrapper is showing width of entire width of elements.

[mxwendt]

I had a similar issue and found a solution.

You can prevent Swiper from overflowing by adding an overflow: hidden to the parent element (in your case the .wrapper).

And there was also an issue with your grid column setup. .sidebar should have a value of 1 / 2 and .carousel a value of 2 / 3.

I updated your Codepen example: https://codepen.io/anon/pen/MdmxNp

[dungle-scrubs]

One more workaround to add, as I’ve noticed something specific. If I have a 2-column grid (using grid-template-columns: 1fr 1fr), the crucial part is that the immediate child in the column must have overflow: hidden. Then, Swiper will calculate its width correctly no matter how far nested it is.

• container (grid, two columns)
  • div (100% width, overflow hidden)
    • div
      • div
        • swiper

If the immediate child of the column is not set to overflow hidden, the width won’t be calculated correctly

This will break:

• container (grid, two columns)
  • div
    • div
      • div (100% width, overflow hidden)
        • swiper