title: Swiper: Really weird behaviour when parent is flex
body: <p>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 <a href="https://codepen.io/obendev/pen/wbzXEa" rel="nofollow noreferrer">https://codepen.io/obendev/pen/wbzXEa</a> I tried showing it to you as best as possible.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var swiper = new Swiper(".swiper-container", {
      // spaceBetween: "8px",
      loop: true
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;div class="site-width"&gt;
      &lt;div class="c-text-slider"&gt;
          &lt;div class="c-text-slider__text"&gt;
              &lt;p&gt;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.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="c-text-slider__slider"&gt;
              &lt;div class="swiper-container"&gt;
                  &lt;div class="swiper-wrapper"&gt;
                      &lt;div class="swiper-slide myelement"&gt;
                          &lt;p&gt;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.&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div class="swiper-slide myelement"&gt;
                          &lt;p&gt;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.&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div class="swiper-slide myelement"&gt;
                          &lt;p&gt;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.&lt;/p&gt;
                      &lt;/div&gt;
  
                      &lt;div class="swiper-slide myelement"&gt;
                          &lt;p&gt;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.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When using <code>spaceBetween</code> it does fit in the given size, although than I can't slide properly anymore.</p>
  
  <p>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?</p>
  
  <p>Here are 2 screenshots as well:</p>
  
  <p>When visiting the site:
  <a href="https://i.stack.imgur.com/oaOhG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oaOhG.png" alt="screenshot2"></a><br>
  <sub>(source: <a href="https://legilimens.de/screenshot2.png" rel="nofollow noreferrer">legilimens.de</a>)</sub>  </p>
  
  <p>After page resize:
  <a href="https://i.stack.imgur.com/5pvS3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5pvS3.png" alt="screenshot1"></a><br>
  <sub>(source: <a href="https://legilimens.de/screenshot1.png" rel="nofollow noreferrer">legilimens.de</a>)</sub>  </p>