Задать вопрос
@LenG0001
html

Почему прокрутить скролл вниз я могу, а вверх — нет?

У меня есть 
<body>
<div class="block">
123321123321123 2123123 213123123123 213123123123 123123123123 123123123123 21321231231231 213123123123 213231231231 12312312312 1231231231 2213223123123123 123123123123123 </div>
<body>
<style>
.block{

background: rgba(42, 29, 29, 0.8);
      height: 10vmin;
      width: 20vmin;
	  background: green;

      font-size: 2vmin;
      padding: 1vmin;
      color: white;

      display: flex;
      align-items: center;
      justify-content: center;

      overflow-x: hidden;
      overflow-y: auto;
     }
<style>

Однако в этом коде верхняя часть текста немного выше нижней - я не могу докрутить скролл так, как внизу. Почему это происходит? 60b746201174a192924613.png
  • Вопрос задан
  • 61 просмотр
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
Убери padding: 1vmin; и добавь внутреннем элементу margin: 1vmin;, так как padding у блока с overflow: hidden | scroll | auto коллапсирует по оси по которой установлен overflow.
А еще, так это flex контейнер, то надо задать либо flex-direction: column; либо flex-wrap: wrap;
А еще вместо align-items: center; установить align-content: center; чтоб не вылезало за пределы.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция WhatsApp, RoiStat и Bitrix24
05 дек. 2024, в 04:42
5000 руб./за проект
Доработка пользовательской части личного кабинета Vue 3
05 дек. 2024, в 00:14
100000 руб./за проект
Написать управление с джойстика (руль, педали) на Python через pygame
04 дек. 2024, в 23:59
10000 руб./за проект
Ещё заказы