Как я могу выстроить ползунки по горизонтали без использования абсолютного позиционирования? CSS неприятностей

Question

Я столкнулся с проблемой, которая мешает мне продолжить. У меня есть простая полноразмерная карусель / слайдер под моей навигационной панелью, но поскольку он использует абсолютное позиционирование, он портит поток остальной части страницы под ним (под ним скрываются div). Я попытался использовать призрачный div с подходящей высотой, чтобы скорректировать высоту области, которая была вне потока, но когда он масштабируется до мобильных размеров, он не работает с моим адаптивным стилем из-за переменной высоты (где текст определяет высоту).

Я хотел бы найти альтернативу, которая не требует абсолютного позиционирования, если это возможно, поскольку это позволит мне сохранить остальную часть моей работы как есть и сохранить работоспособность адаптивных функций. К тому же я просто не фанат абсолютного позиционирования без крайней необходимости. ;)

В настоящее время я использую абсолютное позиционирование и переполнение: hidden; чтобы выровнять 4 ползунка div рядом друг с другом ... используя left: 100% ;, left: 200% ;, et c.

Я хотел бы найти способ выровнять 4 блока (шириной 100% каждый, всего 400% ширины) бок о бок со скрытым переполнением, так что мой ползунок по-прежнему будет работать так же, но без использования абсолютного позиционирования. Желательно использовать только CSS.

Вот соответствующие части CSS и HTML (не уверен, все ли они актуальны):

/* SLIDER CONTAINER */

.css-slider-wrapper {
  overflow: hidden;
}


/* SLIDERS */

.slider {
  width: 100%;
  position: absolute;
  left: 0;
  top: 68px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.slide-1 {
  left: 0;
}

.slide-2 {
  left: 100%
}

.slide-3 {
  left: 200%
}

.slide-4 {
  left: 300%;
}

.slider {
  display: flex;
  justify-content: flex-start;
}

<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">


  <!-- Slider #1 -->
  <div class="slider slide-1">CONTENT</div>

  <!-- Slider #2 -->
  <div class="slider slide-2">CONTENT</div>

  <!-- Slider #3 -->
  <div class="slider slide-3">CONTENT</div>

  <!-- Slider #4 -->
  <div class="slider slide-4">CONTENT</div>

  <!-- Slider Pagination -->
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>

</div>

Спасибо за ваше время и помощь!

Answer 1

Оберните ползунки гибким боксом (.sliders-container) и установите гибкость каждого ползунка на flex: 0 0 100vw; (не увеличивать, не сжимать, ширина экрана базового размера.

body {
  margin: 0;
}

/* SLIDER CONTAINER */

.css-slider-wrapper {
  /** overflow: hidden; **/
}

.sliders-container {
  display: flex;
  height: 90vh;
}

/* SLIDERS */

.slider {
  display: flex;
  flex: 0 0 100vw;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.slide-1 {
  background: red;
}

.slide-2 {
  background: blue;
}

.slide-3 {
  background: green;
}

.slide-4 {
  background: yellow;
}

.slider {
  display: flex;
  justify-content: flex-start;
}

<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">

  <div class="sliders-container">
    <!-- Slider #1 -->
    <div class="slider slide-1">CONTENT</div>

    <!-- Slider #2 -->
    <div class="slider slide-2">CONTENT</div>

    <!-- Slider #3 -->
    <div class="slider slide-3">CONTENT</div>

    <!-- Slider #4 -->
    <div class="slider slide-4">CONTENT</div>
  </div>

  <!-- Slider Pagination -->
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>

</div>