@krisdayer

Почему фиксированное значение в пикселях отображается по разному?

Код:
HTML
<header></header>
    <div class="main">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>


CSS

* {
  padding: 0;
  margin: 0;
  border: 0;
}

header {
  height: 50px;
  background-color: black;
}

.main {
  display: flex;
  width: 100%;
  height: 500px;
  justify-content: space-between;
  align-items: flex-start;
}

.left {
  background-color: red;
  width: 200px;
  height: 500px;
}

.center {
  background-color: yellow;
  width: 100%;
  height: 500px;
}

.right {
  background-color: blue;
  width: 200px;
  height: 500px;
}

@media (max-width: 599px) {
  .left,
  .right {
    display: none;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .right {
    display: none;
  }
}


Без синего блока справа красный блок больше
5d398fbba10ed097922333.png

С синем блоком справа красный блок меньше
5d398fc8a6267854434966.png
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
.left, .right
flex-shrink 0
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@tyzberd
для левого добавить flex-shrink: 0;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы