Grid layout rendered differently on refresh vs. resizing browser window

I just started with a grid layout and noted that it renders differently on the same viewport size:

(1) Initial display in maximized window, nothing special here:

(2) After resizing the browser window using button the text in the left sidebar gets wrapped:

(3) After refreshing the browser window without changing its size, the wrapping in the left sidebar is removed: Note how there suddenly is no more wrapping in the text in the left sidebar, while the viewport size is still the same!

How can that be? I am on Windows with Chrome 89.0.4389.82 (latest stable). With Firefox 86 I also have strange resizing effects (wrapping text on small windows and the wrapping does not get removed on maximize). Wondering of two major browser can have bugs on simple grids? Am I doing something wrong/missing?

Used CSS/HTML:

<style type="text/css">    body {      height: 100vh;      margin: 0;      display: grid;      grid-template-rows: auto 1fr;      grid-template-columns: auto minmax(0, 1fr);    }      header {      background-color: #add790;      text-align: center;      grid-column: span 2;    }      nav {      background-color: orange;      overflow: auto;      padding: 1em;    }      article {      overflow: auto;      padding: 1em;    }  </style>    <header>    <h1>Title</h1>  </header>  <nav>    <p>Navigation</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>    <p>Some text.</p>  </nav>  <article>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>    <p>Here too there should be a local scrollbar.</p>  </article>  

https://stackoverflow.com/questions/66572128/grid-layout-rendered-differently-on-refresh-vs-resizing-browser-window March 11, 2021 at 04:08AM