Всем привет! Столкнулся с проблемой при масштабировании

Question

В общем, при смещении масштаба страницы контент выезжает за пределы страницы,хотя должен уходить вниз друг под друга.Объясните,пожалуйста, в чем проблема?Буду очень признателен.ссылка на гитхаб

Answer 1

У вас на "контейнерах" с элементами стоит display: flex
Но не установлено свойство flex-wrap: wrap, которое позволяет переносить контент если он не вмещается

Условный ваш код:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 350px;
  background: black;
}

.container {
  display: flex;
  border: 4px solid dodgerblue;
  width: 100%;
}

.item {
  height: 50px;
  min-width: 140px;
  border: 2px solid orangered;
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="wrapper">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

При добавлении flex-wrap: wrap элементы переносятся

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 350px;
  background: black;
}

.container {
  display: flex;
  flex-wrap: wrap; /* добавлено для переноса */
  border: 4px solid dodgerblue;
  width: 100%;
}

.item {
  height: 50px;
  min-width: 140px;
  border: 2px solid orangered;
  margin-bottom: 10px; /* добавлено для отступа */
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="wrapper">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

UPD

Так же можете воспользоваться гридами + медиа-выражениями

БЛОГ НА HUSL

Всем привет! Столкнулся с проблемой при масштабировании

Ответы (1 шт):