Как создать макет слайдера с помощью css flex box?

Question

Я пытаюсь создать макет слайдера с флекс-боксами, как на этой фотографии:

Здесь у меня большое фото с правой стороныи миниатюрные элементы слева.Я хочу выровнять обертку левой стороны и миниатюр с большой высотой фотографии.Но, к сожалению, это невозможно только при использовании гибких коробок, и я должен проверить высоту большой фотографии с помощью JavaScript и выровнять левую сторону с этим.

Например, проверьте этот код:

main{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper{
    width: 500px;
    overflow: hidden;
    background: gray;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.right{
    width: calc(100% - 150px);
    height: 450px;
    background: red;
}

.left{
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.item{
    width: 100%;
    height: 50px;
    color: white;
    background: green;
    display: flex;
    align-items: center;
    justify-content: center;
}

<main>

  <div class="wrapper">
      <div class="left">
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
      </div>
      <div class="right"></div>
  </div>

</main>

В примере кода у меня нет изображения, и я решил эту проблему с высотой 450px в CSS.

Так как я могу выровнять левыйсторона без JS и только с CSS?Я хочу использовать режим space-between, чтобы показать все элементы этой высоты.Учтите, что height:100% не работает для этой проблемы.

Answer 1

Согласно моему комментарию, для того, чтобы ваш левый столбец расширился до высоты вашего правого столбца, все, что вам нужно сделать, это удалить элементы выравнивания из вашей оболочки:

main{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper{
    width: 500px;
    overflow: hidden;
    background: gray;
    display: flex;
    /* align-items: flex-start; -- remove this */ 
    justify-content: center;
}

.right{
    /* width: calc(100% - 150px);  I would swap this for flex grow, then you don't need hard values */
    flex-grow: 1;
    height: 450px;
    background: red;
}

.left{
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.item{
    width: 100%;
    height: 50px;
    color: white;
    background: green;
    display: flex;
    align-items: center;
    justify-content: center;
}

<main>

  <div class="wrapper">
      <div class="left">
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
          <div class="item">
              <strong>Item</strong>
          </div>
      </div>
      <div class="right"></div>
  </div>

</main>

Answer 2

Примерно так можно сделать с помощью flexbox, если вы установите высоту контейнера равной высоте, которую вы хотите, чтобы все ваши ползунки были:

.container {
  display: flex;
  flex-flow: column wrap;
  height: 250px;
  width: 250px;
}

.container > * {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
}

.thumbs {
  flex-direction: row;
  margin-right: 5px;
}

.thumb {
  background: red;
  flex: 1 100%;
  margin: 5px 0;
}

.large {
  background: blue;
  margin: 5px;
}

<div class="container">
  <div class="thumbs">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
  <div class="large"></div>
</div>

Answer 3

В этом решении используются CSS Grid layouts - используйте display: grid на вашем wrapper, который выкладывает ваши left и right разделы, используя grid-template-columns: 150px 1fr (удалитеwidth определений в элементах right и left.).

Теперь добавьте height: 100% к left, а затем к элементам flex: 1 для элементов flexbox кзанимать динамическую высоту, исходящую из секции right - см. демонстрацию ниже:

main {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 500px;
  overflow: hidden;
  background: gray;
  display: grid; /* make this a grid container */
  grid-template-columns: 150px 1fr; /* 150px for left and rest for right*/
  align-items: flex-start;
  justify-content: center;
}

.right {
  /* width: calc(100% - 150px);*/
  height: 450px;
  background: red;
}

.left {
  /*width: 150px;*/
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100%; /* ADDED */
}

.item {
  width: 100%;
  height: 50px;
  color: white;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* ADDED */
}

<main>
  <div class="wrapper">
    <div class="left">
      <div class="item">
        <strong>Item</strong>
      </div>
      <div class="item">
        <strong>Item</strong>
      </div>
      <div class="item">
        <strong>Item</strong>
      </div>
      <div class="item">
        <strong>Item</strong>
      </div>
      <div class="item">
        <strong>Item</strong>
      </div>
    </div>
    <div class="right"></div>
  </div>

</main>