title: Grid cell is expanding when using white-space
body: <p>I want the grid cell to fit as much text as possible until the text would not wrap on a second line.</p>
  
  <p>I'm using the text ellipsis technique but it does not work when used in a grid.</p>
  
  <p>In the codepen link below i was able to nowrap the text but it causes the cell grid to expand. Any idea why?</p>
  
  <p>Additional I would to avoid any space between each column, that's why i want to avoid fix sizes.</p>
  
  <p>Codepen: <a href="https://codepen.io/gregorym/pen/oNvVzqB?&amp;editable=true" rel="nofollow noreferrer">https://codepen.io/gregorym/pen/oNvVzqB?&amp;editable=true</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div&gt;
      &lt;span&gt;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. &lt;/span&gt;
    &lt;/div&gt;
    &lt;div&gt;
      Item with flexible width but a minimum of 200 pixels.
    &lt;/div&gt;
    &lt;div&gt;
      Inflexible item of 150 pixels width.
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#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 &gt; div {
    background-color: #8ca0ff;
    padding: 5px;
  }
  
  #container &gt; div &gt; span {
    color: red;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </code></pre>