Ячейка сетки расширяется при использовании пробелов

Question

Я хочу, чтобы ячейка сетки помещалась как можно больше текста, пока текст не будет перенесен на вторую строку.

Я использую технику многоточия текста, но она не работает при использовании в сетке.

В приведенной ниже ссылке на кодовый блок мне удалось обернуть текст, но это привело к расширению сетки ячеек.Любая идея, почему?

Дополнительно я хотел бы избежать пробелов между столбцами, поэтому я хочу избегать фиксированных размеров.

Codepen: https://codepen.io/gregorym/pen/oNvVzqB?&editable=true

<div id="container">
  <div>
    <span>Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. </span>
  </div>
  <div>
    Item with flexible width but a minimum of 200 pixels.
  </div>
  <div>
    Inflexible item of 150 pixels width.
  </div>
</div>

#container {
  display: grid;
  grid-template-columns: minmax(min-content, auto) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

#container > div > span {
  color: red;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 1

я смог теперь обернуть текст, но это привело к расширению сетки ячеек

1) Не используйте min-content в grid-template-columns значении.Это расширяет ячейку, чтобы соответствовать ширине содержимого.

2) Свойства, которые запрещают перенос текста и сокращают строку, применяются к <div>, а не <span>

Это то, что вынужно?

Результат

#container {
  display: grid;
  grid-template-columns: minmax(auto, 300px) minmax(200px, 1fr) 150px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container div:nth-child(odd) {
  background: #EEE;
}

#container>div {
  background-color: #8ca0ff;
  padding: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#container>div>span {
  color: red;
  /*   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax -->

<div id="container">
  <div>
    <span>Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. Item as wide as the content, but at most 300 pixels. </span>
  </div>
  <div>
    Item with flexible width but a minimum of 200 pixels.
  </div>
  <div>
    Inflexible item of 150 pixels width.
  </div>
</div>

И тот же код на CodePen