スライドの中身がスライドの枠の中に全て表示されてしまう理由とdisplay：flexを使ってもうまくいく方法が知りたいです。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html

    <div class="slider">
      <div class="slideSet">
        <div class="slide">slide1</div>
        <div class="slide">slide2</div>
        <div class="slide">slide3</div>
        <div class="slide">slide4</div>
        <div class="slide">slide5</div>
      </div>
    </div>


css

.slideSet{display: flex}
.slider .slide {
  width: 498px;
  height: 198px;
  border: 1px solid #f00;
  float: left;
}


.slider {
  width: 500px;
  height: 200px;
  overflow: hidden;
}


jquery

      var slideWidth = $('.slide').outerWidth(); 
      var slideNum = $('.slide').length; // 
      var slideSetWidth = slideWidth * slideNum; 
      $('.slideSet').css('width', slideSetWidth);

試したこと

.slideSet{display: flex}
をやめて

.slider .slide {
float: left;
}

にするとうまくいったのですが、勉強のため、.slideSet{display: flex}でうまくいかない理由(枠の中に要素が全て収まってしまう)が知りたいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

  $(function() {




      var slideWidth = $('.slide').outerWidth(); 
      var slideNum = $('.slide').length; 

      var slideSetWidth = slideWidth * slideNum; 
      $('.slideSet').css('width', slideSetWidth); 
      var slideCurrent = 0;

      var sliding = function() {

        if (slideCurrent < 0) {
          slideCurrent = slideNum - 1;


        } else if (slideCurrent > slideNum - 1) 
          slideCurrent = 0;
        }

        $('.slideSet').animate({
          left: slideCurrent * -slideWidth
        });
      }

コードの続きを書いていったらdisplay:flexだけでうまくできました。
うまくいった理由がわからないのでわかる方いましたら教えていただきたいです。

Answer 2

.slideSet { 
    display: flex;
    flex-wrap: wrap
}

flex-wrap: wrapで折り返しの指定ができるので、これだったら上手くいきそうです。
説明が下手っぴなんで、css flexとかで検索すると色々記事が出てくると思いますので、ぜひ検索してみてくださいませ！
この記事とかどうでしょう？
https://webdesign-trends.net/entry/8148