我正在嘗試使用 flexbox 將容器內顯示的所有字母均勻地間隔開來?，F在，如果我輸入像“我喜歡學習代碼”這樣的句子，所有元素都顯示在容器中并且工作正常，但是如果我使用像“冰箱”這樣的長詞，字母就會從容器中出來。但是我試圖將所有字母都保留在容器中，無論單詞有多長。我嘗試了所有可用的 flexbox 技術，但沒有運氣。也嘗試了容器上的max-width。我錯過了什么？下面是代碼沙盒中的代碼： https://codesandbox.io/s/modern-sun-3u7b3?file=/src/App.jsimport 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;}