title: Why does justify-items cancels 1fr in grid?
body: <p>Let's consider the following HTML snippet:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;longText&quot;&gt;Lorem Ipsum Dolor Sit Amet and so on !&lt;/div&gt;
    &lt;div class=&quot;otherContent&quot;&gt;*&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The <code>.container</code> has a min-width of 500px, and the <code>.otherContent</code> takes exactly 350px.</p>
  <p><code>.longText</code> needs to be displayed on the left of <code>.otherContent</code>, it cannot be smaller than 150px, and if the text is too long, it needs to make an ellipsis.</p>
  <p>The ellipsis part is easily managed by the famous combo <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis;</code>.</p>
  <p>There are many ways to solve the positioning. Let's use <code>display: grid;</code> with <code>grid-template-columns: minmax(150px, 1fr) 350px;</code> on the <code>.container</code>.</p>
  <p>This works nicely.</p>
  <p>However, if I add <code>justify-items: start;</code> on <code>.container</code> then the display breaks: when the text is too long, the <code>.longText</code> does not reduce, and so the ellipsis is not created (<a href="https://jsfiddle.net/rwdfvygz/1/" rel="nofollow noreferrer">jsfiddle here</a>, reduce the size of your browser to see the left div overlapping the right one).</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    min-width: 500px;
    border: 1px #f00 solid;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 350px;
  
    justify-items: start;
  }
  
  .longText {
    border: 1px #00f solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .otherContent {
    height: 50px;
    width: 350px;
    border: 1px #0f0 solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="longText"&gt;
      Lorem Ipsum Dolor Sit Amet and so on !
    &lt;/div&gt;
    &lt;div class="otherContent"&gt;
    *
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Why does <code>justify-items</code> has this effect ?</p>