#StackBounty: #html #css #css-grid CSS Grid layout max-content does not work as expected in Firefox

Bounty: 50

I used CSS Grid layout to create a basic layout for a page, and I worked originally in Chrome while doing that. I tested this now also in Firefox and noticed some behaviour that I don’t understand and that doesn’t seem to follow the specification as I understand it.

I created a simplified example that shows the behaviour. The problem is the height of the search-header div. This is set to max-content and should be just as large as needed to fit the contained element.

This works as expected in Chrome 66, but not in Firefox 52 ESR or Firefox 62 Developer Edition (all on Linux). In Firefox the search-header div is larger and extends beyond the contained span. This does only happen if there are the input elements in the search-sidebar div, and the more of them I add the larger the search-header div gets.

Am I misunderstanding how max-content is supposed to work? Why are Firefox and Chrome behaving differently in this case? And how can I fix this?

<

div class=”snippet”>

<

div class=”snippet-code”>

.search {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 4fr;
  grid-template-rows: max-content auto;
  grid-gap: 10px;
  height: 95vh;
  width: 100%;
  align-self: stretch;
  background: #FFF;
  overflow: hidden;
  margin-top: 5px;
}

.search-sidebar {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: #CCFFFF;
  padding: 5px;
}

.search-header {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background: #FFCCCC;
  padding: 5px;
}

.search-table {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background: #FFFFAA;
}