Как сохранить все элементы внутри контейнера с помощью flexbox?

Я пытаюсь, чтобы все буквы, отображаемые в контейнере, были равномерно распределены с помощью flexbox. Прямо сейчас, если я ввожу предложение типа «Мне нравится изучать код», все элементы отображаются внутри контейнера и работают нормально, но если я использую длинное слово, например «холодильник», буквы выходят из контейнера. Но я стараюсь, чтобы все буквы оставались внутри контейнера, независимо от длины слова. Я пробовал все доступные методы flexbox, но безуспешно. Пробовал max-width и на контейнере. Что мне не хватает? Вот код в песочнице кода: https://codesandbox.io/s/modern-sun-3u7b3?file=/src/App.js

import React from "react";
import "./styles.css";

function App() {
  // let sentence = "I like learning code";
  let sentence = "refrigerator";
  const words = sentence.split(" ");

  return (
    <div className = "pageContainer">
      {words.map((word, i) => (
        <div className = "row" key = {i}>
          {[...word].map((letter) => (
            <p className = "letterBorder">{letter}</p>
          ))}
          {i === words.length - 1 ? null : <p className = "whiteSpaceBorder"></p>}
        </div>
      ))}
    </div>
  );
}

export default App;

.letterBorder {
  border: 25px;
  background: grey;
  padding: 20px;
  width: 50px;
  height: 30px;
  flex-grow: 1;
  margin-right: 4px;
  margin-left: 4px;
}

.row {
  display: flex;
  justify-content: space-evenly;
  min-width: 100%;
  align-content: flex-start;
}

.whiteSpaceBorder {
  border: 25px;
  background: orange;
  padding: 20px;
  width: 50px;
  height: 30px;
  flex-grow: 1;
  margin-right: 4px;
  margin-left: 4px;
}

.pageContainer {
  border-radius: 1rem;
  text-align: center;
  background: lightcyan;
  height: 40rem;
  width: 30rem;
  margin: auto;
}