0

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

display: flex;
flex-wrap: nowrap;
overflow-x: auto;

У самого фильтра стили такие: flex: 0 0 auto;

То есть при большом количестве фильтров появляется горизонтальный скролл, но при уменьшении ширины экрана в определенный момент сам блок с фильтрами перестает сужаться и выпадает. Подскажите, как решить данную проблему и сделать так, чтобы блок с фильтрами постепенно сужался и не выпадал? Именно постепенно. Заранее спасибо за ответ.

html,
body {
  margin: 0;
  padding: 0
}

.cont {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.wrap {
  height: 200px;
  max-width: 630px;
  background-color: #fde333;
  margin: auto;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.filter {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

input {
  display: none;
  flex: 0 0 auto;
}

label {
  flex: 0 0 auto;
  color: #000000;
  font-size: 1.3rem;
  line-height: 1.5rem;
  font-weight: bold;
  padding: 7px 15px 8px 15px;
  margin: 0 5px;
  background-color: #cccccc;
  border-radius: 20px;
}
<div class="cont">
  <div class="wrap">
    <div class="filter popup__filter">
      <input type="checkbox" name="все" value="все" id="все" checked />
      <label class="filter__category popup__category" for="все">Все</label>
      <input type="checkbox" name="Кухня" value="Кухня" id="Кухня" />
      <label class="filter__category popup__category" for="Кухня">Кухня</label>
      <input type="checkbox" name="Зал" value="Зал" id="Зал" />
      <label class="filter__category popup__category" for="Зал">Зал</label>
      <input type="checkbox" name="Лампочки" value="Лампочки" id="Лампочки" />
      <label class="filter__category popup__category" for="Лампочки">Лампочки</label>
      <input type="checkbox" name="Камеры" value="Камеры" id="Камеры" />
      <label class="filter__category popup__category" for="Камеры">Камеры</label>

      <input type="checkbox" name="1" value="1" id="1" checked />
      <label class="filter__category favorite-devices__categor" for="1">qwqweq</label>
      <input type="checkbox" name="2" value="2" id="2" />
      <label class="filter__category favorite-devices__categor" for="2">1qwseqw</label>
      <input type="checkbox" name="3" value="3" id="3" />
      <label class="filter__category favorite-devices__categor" for="3">qwdqwdas</label>
      <input type="checkbox" name="4" value="4" id="4" />
      <label class="filter__category favorite-devices__categor" for="4">sdva</label>
      <input type="checkbox" name="5" value="5" id="5" />
      <label class="filter__category favorite-devices__category" for="5">dfs</label>
    </div>
  </div>
</div>

То, что уже сделано.

3
  • 1
    Впрос должен содержать пример, а не скрин
    – Air
    29 авг 2018 в 21:42
  • Прошу прощения, я не знал, что нужен именно пример. Вот упрощенный вариант, который отражает загвоздку. codepen.io/dimkadenisov/pen/YOpXyK 29 авг 2018 в 22:10
  • Добавьте блоку wrap свойство width: 100%;
    – E_K
    30 авг 2018 в 7:25

1 ответ 1

0

Достаточно задать свойство min-width для блока с классом filter popup__filter, в сочетании с max-width попап не будет вырастать больше заданного размера, а на маленьких девайсах корректно сожмется.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.