title: Why does CSS Grid element width not resize on auto-flow: column in MS Edge?
body: <h2>TL;DR</h2>
  
  <p>This code works in Chrome, but not MS Edge <a href="https://angular-ysqrgh.stackblitz.io/" rel="nofollow noreferrer">https://angular-ysqrgh.stackblitz.io/</a> because the <code>grid</code> container width does not change in MS Edge</p>
  
  <h2>Context</h2>
  
  <p>I'm trying to add a button container on the right side of my page for a map tool. Imagine buttons like zoom in, zoom out, etc. Due to the rest of the UI, it has to be positioned there.</p>
  
  <p>There are several different types of button groups that will all go inside this button container. In my example, I've differentiated between the groups by marking them with a <code>+</code> or <code>-</code>.</p>
  
  <h2>Desired behavior</h2>
  
  <p>Each button group is defined as a <code>display: grid</code>. The behavior I'm looking for is that when the screen is tall enough in height, all buttons are displayed. If the height is not small enough to display them all, each group will wrap excess buttons onto another column, with a minimum amount of 2 rows (as many columns as necessary).</p>
  
  <p>Additionally, I want each grid to take up only as much height as it has content, not take expand to the whole parent's height (which is why I'm not using flex-grow).</p>
  
  <p>This is an example of what I want <a href="https://angular-ysqrgh.stackblitz.io/" rel="nofollow noreferrer">https://angular-ysqrgh.stackblitz.io/</a>
  It works in Chrome, but not in Edge. Note: I mirrored the elements on the left-hand side just for reference in this example.</p>
  
  <h2>What I think is the cause</h2>
  
  <p>MS Edge seems to have a problem when using this <code>grid-auto-flow: column</code> behavior. I did a test with rows and columns reversed, and MS Edge seems to be able to resize widths and heights just fine in that mode <a href="https://angular-mzvgjm.stackblitz.io" rel="nofollow noreferrer">https://angular-mzvgjm.stackblitz.io</a> so I feel like the problem has to do with how MS Edge handles the <code>grid-auto-flow</code> property.</p>
  
  <p>In this 'row' example, I did have a problem with getting it to lay out all the buttons in a single row when expanded... Maybe related to the problem I'm having with the column layout but I'm not seeing the solution.</p>
  
  <p>Is there any way to achieve the behavior I'm looking for?</p>
  
  <p><strong>EDIT1:</strong> Here's the code featured in the Stackblitz link...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="map-controls-container"&gt;
    &lt;div id="map-navigation-controls" class="map-controls-style"&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div id="map-selection-controls" class="map-controls-style"&gt;
      &lt;button type="button" class="btn"&gt;-&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;-&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;-&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="map-controls-container2"&gt;
    &lt;div id="map-navigation-controls" class="map-controls-style"&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;+&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div id="map-selection-controls" class="map-controls-style"&gt;
      &lt;button type="button" class="btn"&gt;-&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;-&lt;/button&gt;
      &lt;button type="button" class="btn"&gt;-&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>.btn {
      border-radius: 0.15rem;
      background-color: #4caf50;
      color: #fff;
      cursor: pointer;
      user-select: none;
      text-align: center;
      white-space: nowrap;
      font-size: 1rem;
      border: 1px solid #4caf50;
      margin: 0;
  }
  #map-controls-container {
    left: 0;
  }
  #map-controls-container2 {
    right: 0;
  }
  #map-controls-container,
  #map-controls-container2 {
      position: absolute;
      top: 0;
      background-color: #0000ff;
      display: inline-flex;
      flex-direction: column;
      min-height: 172px;
      height: 100%;
  
      .map-controls-style {
          min-height: 86px;
          max-height: 100%;
          display: grid;
          background-color: #1b5e20;
          grid-template-rows: repeat(auto-fit, 40px);
          align-content: space-around;
          grid-gap: 2px;
          padding: 2px;
          grid-auto-flow: column;
          grid-auto-columns: 40px;
  
          button {
              background-size: 100% 100%;
              background-origin: content-box;
              background-position: center center;
              width: 40px;
              height: 40px;
              padding: 0;
          }
      }
  }
  </code></pre>
  
  <p><strong>EDIT2:</strong> Just to clarify, I'm looking for a CSS answer to this problem. I've managed to get the desired results for now by subscribing to the window resize event and manually calculating a new width using Typescript.</p>