Как сделать так чтобы блок не съезжал вниз?

Question

[Никита]

Привет, подскажите, как сделать, так чтобы блок не съезжал вниз?
У меня есть блок intro

C вот такими стилями:

display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-color: #1D1D1D;

И есть блок контейнер


C вот такими стилями:

padding-left: 12px;
padding-right: 6px;

Проблема в том, что на реальном айфоне получается вертикальный скролл:



Не подскажите, как решить проблему?
Вот код: codesandbox
Стили в App.scss

Answer 1

[Николай Смирнов]

Посмотрите ответ на вопрос Проблемы с height: 100vh на мобильном. Как решить? Вопрос немного другой, но ответ как раз про ваш случай.

Answer 2

[strelok011]

Если я не ошибаюсь, то надо добавить контейнеру ширину 100% и box-sizing: border-box.
Лучше будет, если Вы код куда-нибудь в доступное место будете выкладывать, кстати говоря.

Comments

[Никита]

А зачем здесь ширина? Она тут динамически считается. Box sizing сейчас проверю

[strelok011]

Затем что у вас внешний блок имеет отступы, а у блока intro заявлено 100% ширины. Если у внешнего блока не задана явно ширина, то intro пойдет за данными о ней выше.

[Никита]

strelok011, прошу прощения, вертикальный скролл появляется, а не горизонтальный
На скринах видно, что при первой загрузке не видно самой нижней кнопки и только при прокрутке вниз, она появляется

[strelok011]

Откажитесь от флекса на вертикали (браузер дивы и так разложит как надо), проверьте все отступы, проверьте box-sizing на элементах с паддингами. Флекс может сыграть дурную шутку.
Проверьте все размеры. Если Вы используете высоту в 100vh, попробуйте привести к этим же единицам измерения и остальные блоки. В разных телефонах будет разная высота.