別々のclassをflexboxにする方法について

実現したいこと

以下のトップページのように、左スライド・右に上下のカラムを設定したいです
https://newspicks.com/

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

現状の状態![左にスライド/右にカラムが左右になっている]

該当のソースコード　html

 <div class="container">
 <div id="slider">
  <div class="slides">
    <div class="slider">

      </div>
    </div>
 </div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
</div>

該当のソースコード　css （他の部分は省略しています、該当部分のみ）

.container {
display: flex;
}

わからないこと

スライドの横に配列はできたものの、Item1とItem2が上下ではなく、左右になっている。

Item1とItem2の幅を広くしようと、以下のcssをかくと、スライドも600pxに縮小してしまう
.container {
display: flex;
width: 600px;

}

不足文がございましたらすみません、
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

display: flex;は子要素を横並びにします。
.sliderと２つの.itemは、.containerの子要素なので横並びになります。

２つの.itemをdivで囲めば縦並びになります。

html
1<div class="container">
2  <div id="slider">
3    <div class="slides">
4      <div class="slider">
5      </div>
6    </div>
7  </div>
8  <div class="items">
9    <div class="item">Item 1</div>
10    <div class="item">Item 1</div>
11  </div>
12</div>