Overlapping content inside flex - Firefox doing it wrong

Question

I noticed some strange behavior of elements in Firefox: This is how it looks in Firefox:

and this is how it looks in Chromium (expected result) .

I tried to strip the whole code into the minimal sample below. Every css property seems to have some effect.

.container {
  display: flex
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.my-button {
max-width:fit-content;
padding-left: 1rem;
padding-right: 1rem;
}

<div class="container">
  <div class=" ">
  part of this text will be overlapped 
  </div>

  <div class="button-container">
    <button type="button" class="my-button ">X</button>
    <button type="button" class="my-button">X</button>
    <button type="button" class="my-button">X</button>
    <button type="button" class="my-button">X</button>
  </div>
</div>

What is wrong here?