Swiper 使用 Edge 和 Safari 在网格内溢出答案

【问题标题】：Swiper overflows inside grid with Edge and SafariSwiper 使用 Edge 和 Safari 在网格内溢出
【发布时间】：2019-11-06 07:35:18
【问题描述】：

This Swiper Fiddle 适用于 Firefox 和 Chrome。显然，我的网格布局使用 Edge 和 Safari 打破了这一点（没有 display: grid 这个小提琴将适用于 Safari 和 Edge）。但是，我不想用 flexbox 替换网格。

在使用 display: grid 时，如何在 Edge 和 Safari 中实现此功能？

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

body {
  background: grey;
}
.grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  grid-gap: 2rem;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  min-height: 80px;
  text-align: center;
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>



</head>

  <body>
    <!-- Swiper -->
    <div class="grid">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <aside>
        <div>
          <p>
            Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi. In neque magna posuere, euismod ac tincidunt tempor est. Ut suscipit nisi eu purus. Proin ut pede mauris eget ipsum. Integer vel quam nunc commodo consequat. Integer ac eros eu tellus dignissim viverra. Maecenas erat aliquam erat volutpat. Ut venenatis ipsum quis turpis. Integer cursus scelerisque lorem. Sed nec mauris id quam blandit consequat. Cras nibh mi hendrerit vitae, dapibus et aliquam et magna. Nulla vitae elit. Mauris consectetuer odio vitae augue.
          </p>
        </div>
      </aside>
    </div>
  </body>
</html>

【问题讨论】：

标签： javascript css safari microsoft-edge swiper

【解决方案1】：

这似乎是使用灵活单元 (fr) 时的问题，并且 Safari 无法正确计算宽度。此问题的解决方法是使用minmax() 定义网格列，例如grid-template-columns: minmax(0, 8fr) 4fr;

【讨论】：

你是最棒的:)