CSS "overflow" does not show the whole word

I have the following arrangement of "divs" in some of these windows, it should be possible to show a scrollbar if the content gets too much. However, the content is then not displayed completely

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

the whole word "problem" should be scrollable

If you look at the code in the browser, you can see that the "p" of "problem" is truncated, the larger the word, the more truncated.

In addition, it should be possible to choose a different word or a different size, meaning it shouldn't just be solved with "margin".

Thank you in advance for any solutions or constructive criticism

Let me downsize the example.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.main-container {
  margin: auto;
  width: 100px;
  height: auto;
  border: 1px solid black;
}

.sub-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    overflow: auto;
    width: auto;
}

<!-- language: lang-html -->

<div class="main-container">
  <div class="sub-container">
    <p>abc</p>
  </div>

  <div class="sub-container">
    <p>abcdefghijklmnopqrstuvwxyz</p>
  </div>
</div>  

<!-- end snippet -->

Here we can see that the second line is clipped off from starting and we cannot scroll to the extreme left.

This happens because in a flexbox, items will not overflow the container's boundaries.

But here is a fix.
To center align the text, instead of using justify-content: center on the container, use margin: auto on the text.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.main-container {
  margin: auto;
  width: 100px;
  height: auto;
  border: 1px solid black;
}

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

.sub-container p {
    margin: auto;
}

<!-- language: lang-html -->

<div class="main-container">
  <div class="sub-container">
    <p>abc</p>
  </div>

  <div class="sub-container">
    <p>abcdefghijklmnopqrstuvwxyz</p>
  </div>
</div>  

<!-- end snippet -->