Ширина просмотра 100% на мобильном телефоне составляет более 100% [React]

Question

Я пытаюсь использовать div на 100% ширины на мобильном телефоне (но не более), используя следующий код:

Код реагирования:

  <div className="max-width-100vw">
    HELLO I AM A SENTENCE THAT IS OVERFLOWING???
  </div>

CSS код :

.max-width-100vw {
  max-width: 100vw;
  width: 100%;
}

Но когда я смотрю на то, что это дает на мобильном устройстве с помощью инструментов chrome dev, я вижу, что div занимает более 100% ширины средства просмотра:

Кто-нибудь знает, почему это происходит и как я могу это исправить? Как хак я мог бы установить width = 50%, и это останавливает его от переполнения, но я ищу более принципиальное решение?

Answer 1

Моя ошибка, это было только потому, что я был увеличен при просмотре в консоли разработчика!