Почему текст выходит за пределы моего контейнера ТОЛЬКО в Google Chrome?

Question

У меня возникают проблемы с выяснением, почему текст выходит за пределы моего контейнера в Google Chrome 84.0.4147.105, но отлично работает в Firefox Developer Edition 80.0b1

<div class="text text-center text-md-left d-flex d-md-block">
  <!-- An Image. Text is supposed to wrap around it using shape CSS properties -->
  <server-image
    height="100vh"
    width="100vw"
  />
  <!-- The paragraph that should appear around the image -->
  <div class="introduction">
    <h1>{{ Hello, I am Riccardo }}</h1>
    <p>...</p>
  </div>
</div>

Вот относительный S CSS:

      .text {
        position: absolute;
        top: 0;
        height: 100vh;
        margin: 0;

        flex-direction: column;
        justify-content: center;
        align-items: center;

      }

    .introduction {

      p {
        white-space: break-spaces;
      }

      display: inline;
      max-width: 72.5%;

      @media #{map-get($display-breakpoints, 'md-and-up')} {
        display: block;
        padding-top: 37.5vh;
        width: 50vw;
        margin-left: 25vw;
        margin-right: 25vw;
      }
    }

Результаты Google Chrome

Результаты в Firefox Developer Edition

Как видите, все работает как ожидалось в Firefox, но не в Chrome. Мне сложно понять, почему это не работает.

Еще одна любопытная вещь - добавление overflow: hidden в элемент p по какой-то причине приводит к исчезновению всего элемента.