Swiper：当父母弯曲时真的很奇怪

Question

今天我试用了这个滑块，发现如果滑块上方的元素是 flexbox，就会出现奇怪的行为。滑块不计入最大宽度。在 codepen 示例https://codepen.io/obendev/pen/wbzXEa 中，我尝试尽可能地向您展示它。

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>

使用时spaceBetween它确实适合给定的尺寸，但我不能再正常滑动了。

我也可以给上部元素一个最大宽度，但这感觉不对。这是一个错误还是我做错了什么？

这里还有 2 个屏幕截图：

访问网站时：
_{（来源：legilimens.de）}

页面调整后：
_{（来源：legilimens.de）}

Answer 1

财产spaceBetween是一个数字，而不是给8px你可以给8。溢出问题是因为swiper的容器是一个flex 项并且默认大小与其内容一样多 - 因此您可以使用min-width: 0.

请参阅下面的完整演示和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：添加min-height: 0是为了覆盖默认min-height: auto的柔性项目在列方向-阅读更多细节在这里：

• 为什么 flex 项目不会缩小超过内容大小？

您可以看到此行为的一些示例：

• Flexbox 影响溢出包装行为

• Flexbox 调整大小和可滚动溢出