Swiper: Really weird behaviour when parent is flex

Question

Today I tried out this slider and discovered a weird behaviour if an element above the slider is flexbox. The slider just doesn't count in the max-width. In the codepen example https://codepen.io/obendev/pen/wbzXEa I tried showing it to you as best as possible.

var swiper = new Swiper(".swiper-container", {
    // spaceBetween: "8px",
    loop: true
});

* {
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 0;
}

html {
  font-family: "Google Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

body {
  background: #fff;
}

.site-width {
  border: 2px solid #f44336;
  margin: 2rem auto;
  max-width: 80rem;
  padding: 3.125rem;
}

.c-text-slider {
  display: flex;
  justify-content: space-between;
}
.c-text-slider__text {
  border: 2px solid #f44336;
  max-width: 200px;
  padding: 0.5rem;
}
.c-text-slider__slider {
  border: 2px solid #f44336;
  padding: 0.5rem;
}
.c-text-slider__text + .c-text-slider__slider {
  margin-left: 0.5rem;
}

.myelement {
  border: 2px solid #f44336;
  padding: 0.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="site-width">
    <div class="c-text-slider">
        <div class="c-text-slider__text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
        </div>
        <div class="c-text-slider__slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide myelement">
                        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

When using spaceBetween it does fit in the given size, although than I can't slide properly anymore.

I could give the upper element an max-width as well but this just doesn't feel right. Is this a bug or am I doing something wrong?

Here are 2 screenshots as well:

When visiting the site:
_{(source: legilimens.de)}

After page resize:
_{(source: legilimens.de)}

never mind, there you go: add `min-width: 0` to your *flex item* (default for flex item is *auto*) to solve the overflow issue... now `spaceBetween: "8px"` should be `spaceBetween: 8`... see https://codepen.io/anon/pen/pmEqzx — kukkuz, May 13 '19 at 17:24
Thank you very much kukkuz! `slidesPerView: 'auto'` for the script works as well (without loop) You can post this is as answer, I will check it as solved. — obeN, May 13 '19 at 18:30

score 11 · Accepted Answer · answered May 14 '19 at 02:20

The property spaceBetween is a number and instead of giving 8px you can just give 8. The overflow issue is because the container of the swiper is a flex item and the default size is as much as its contents - so you can override this behaviour using min-width: 0.

See complete demo below and updated codepen:

var swiper = new Swiper(".swiper-container", {
    spaceBetween: 8,
    loop: true
});

* {
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 0;
}

html {
  font-family: "Google Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

body {
  background: #fff;
}

.site-width {
  border: 2px solid #f44336;
  margin: 2rem auto;
  max-width: 80rem;
  padding: 3.125rem;
}

.c-text-slider {
  display: flex;
  justify-content: space-between;
}
.c-text-slider__text {
  border: 2px solid #f44336;
  max-width: 200px;
  padding: 0.5rem;
}
.c-text-slider__slider {
  border: 2px solid #f44336;
  padding: 0.5rem;
  min-width: 0;
}
.c-text-slider__text + .c-text-slider__slider {
  margin-left: 0.5rem;
}

.myelement {
  border: 2px solid #f44336;
  padding: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<div class="site-width">
    <div class="c-text-slider">
        <div class="c-text-slider__text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque.</p>
        </div>
        <div class="c-text-slider__slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide myelement">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>

                    <div class="swiper-slide myelement">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec ultrices tincidunt arcu non sodales neque. Scelerisque varius morbi enim nunc faucibus a pellentesque.
                            Faucibus turpis in eu mi bibendum neque egestas. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Tempor nec feugiat nisl pretium. Ridiculus mus mauris vitae ultricies leo integer.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - read more details here:

Why don't flex items shrink past content size?

You can see some examples of this behavior:

Thanks you very much! :D – Jesús Magallón Dec 16 '20 at 18:58 — Jesús Magallón, Dec 16 '20 at 18:58

Swiper: Really weird behaviour when parent is flex

1 Answers1