title: CSS grid items not filling width in macOS Safari when alignment is set to baseline
body: <p>I have a problem with a CSS grid layout which only occurs on macOS Safari (testing on v13.1). The following snippet should result in a <code>label</code> and a <code>textfield</code> - with the latter extending to the full width of the <code>div</code> container. This works in Chrome and Firefox, but Safari just won't do it. Interestingly enough the layout snaps into place when resizing the window but breaks again when focusing the textfield.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              display: flex;
              flex-direction: column;
              overflow: hidden;
          }
  
          div {
              background-color: lightcoral;
              display: grid;
              grid-template-columns: auto 1fr;
              align-items: baseline;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div&gt;
      &lt;label&gt;Label&lt;/label&gt;
      &lt;input type="text" placeholder=" "&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/DerEisvogel/pen/KKdzdza" rel="nofollow noreferrer">CodePen</a></p>
  
  <p>When removing the <code>display</code> or <code>overflow</code> property from the <code>body</code> tag the grid layout works as expected. But both properties are required in the environment where this problem occurs. Hence, the problem cannot be solved by removing those properties. The problem also disappears when changing <code>align-items</code> to anything but <code>baseline</code>. Unfortunately <code>baseline</code> alignment is also key for the desired layout.</p>
  
  <p>This behavior seems like a bug in Safari to me, but I though I'd ask a second opinion. If there is a solution I would be glad if you could share it.</p>
  
  <p>BTW: The empty <code>placeholder</code> with the single space character already is a fix for <code>baseline</code> alignment in Safari. Without it empty textfields will be aligned at the bottom rather than their <code>baseline</code>.</p>