how to set minmax correctly with auto-fit

Question

I have a grid container with elements the number of elements in the example is specified by the hardcode, but it is assumed that the number is unknown

my html

<div className={'grid-container1'}>
      <div className="item1">test</div>
      <div className="item1">Lorem ipsum dolor sit amet.</div>
      <div className="item1"></div>
      <div className="item1">Lorem ipsum dolor</div>
      <div className="item1"> ipsum dolor</div>
    </div>

my css

.grid-container1 {
  display: grid;
  height: 300px;
  grid-template-columns: repeat(auto-fit, minmax(0px, 4em));
  gap: 1rem;
  .item1 {
    padding: 0.5rem;
    background-color: green;
    border: 1px solid rgba(173, 255, 47, 0.67);
    max-width: 100px;
  }
}

I'm learning auto-fit and it's supposed to be useful for cases where the number of grid elements is unknown Using the minmax function I'm trying to get a result where: elements will occupy the width of the content, but not exceed 100px

I tried to put min-content, but that doesn't work either elements take up 100px even if their content is smaller please tell me how to use auto-fit correctly, so that the expected elements occupy the width of the content, but if their content exceeds 100px, have a width of 100px

grid-template-columns: repeat(auto-fit, minmax(0px, 4em));