我有以下安排的“div”在这些窗口中的一些，它应该可以显示一个滚动条，如果内容得到太多。然而，内容随后不完全显示

.main-container {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-areas:
        'table   button'
        'table   word'
        'table   debugger'
        'graph   debugger'
        'graph   debugger'
        'graph   debugger'
        'code    code';
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 48px 48px 1fr 1fr 48px 48px 48px;
    gap: 2px;
}

.sub-container {
    background-color: #4d7ba9;
    border-radius: 0px;
    display: flex;
    justify-content: center;
}

#table-container {
    grid-area: table;
}

#graph-container {
    grid-area: graph;
}

#button-container {
    grid-area: button;
}

#word-container {
    grid-area: word;
}

#debug-container {
    grid-area: debugger;
}

#code-container {
    grid-area: code;
}

#graph-container {
    display: flex;
}

#table-container {
    display: flex;
    align-items: flex-start;
    text-align: center;
    overflow: auto;
    width: auto;
}

<div class="main-container">
  <div class="sub-container" id="table-container">
    <p id="text">problem</p>
  </div>

  <!-- All containers should remain as they are -->
  <div class="sub-container" id="graph-container">
  </div>

  <div class="sub-container" id="button-container">
  </div>

  <div class="sub-container" id="word-container">
  </div>

  <div class="sub-container" id="debug-container">
  </div>

  <div class="sub-container" id="code-container">
  </div>
</div>

整个单词“问题”应该是可滚动的
如果你在浏览器中查看代码，你可以看到“problem”的“p”被截断了，单词越大，截断的越多。
此外，应该可以选择不同的单词或不同的大小，这意味着它不应该只是用“margin”来解决。
提前感谢您的任何解决方案或建设性的批评