Chrome/Firefox Percentage Height Differences in CSS Grid

css-grid rendering differently on Firefox and Chrome

If you going to use percentages, like this:

.site {
    display: grid;
    grid-template-rows: 10% 70% 20%;
 }

Then you need to give the rows a reference point. (Percentage lengths use the height / width of the parent as reference. If there's no parent reference, the element with a percentage length defaults to height: auto (content-size)).

Add this to your code:

.site {
    display: grid;
    grid-template-rows: 10% 70% 20%;
    height: 100vh; /* new */
 }

OR (simpler and possibly more stable across browsers)

.site {
    display: grid;
    grid-template-rows: 10vh 70vh 20vh;
 }

More details:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent (solutions apply to Grid, as well)

Overflow difference between Chrome and Firefox in grid container

The problem is related to the use of percentage heights:

div.userContent {
    border: 1px solid tomato;
    box-sizing: border-box;
    height: 100%; <---------------- problem
    overflow: auto;
}

In CSS, traditionally, a percentage height on an element can only work if there exists a defined height on the parent (as a reference point).

Chrome and Safari still adhere to this rule. They need a defined height on the parent for a percentage height to work on the child.

Firefox and Edge do not anymore. They now take whatever height is computed as a valid reference for the percentage height on the child.

This works across browsers:

div.outer {  display: grid;  grid-template-rows: 36px 1fr;  height: 100px;}
div.content {  grid-row: 2/3;  overflow: hidden;  height: calc(100px - 36px); /* the missing link between .outer and .userContent */}
div.userContent {  border: 1px solid tomato;  box-sizing: border-box;  height: 100%;  overflow: auto;}
div.header {  grid-row: 1/2;}
div {  box-sizing: border-box;  border: 1px solid gray;}

<div class="outer">  <div class="header">Header</div>  <div class="content">    <div class="userContent">      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet praesentium aperiam quo sapiente obcaecati. Tenetur, eveniet sit explicabo dolore numquam impedit nesciunt qui magnam nisi maiores voluptate officiis, excepturi praesentium!</p>      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem natus hic minus obcaecati? Quidem id repellat vitae! Cupiditate, expedita laborum officia culpa nostrum corrupti incidunt ullam consequatur quidem impedit illum.</p>      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non nihil rerum nobis, corrupti quae quisquam saepe. Rem eum exercitationem error provident, ipsum voluptatum aperiam inventore, numquam, quo tenetur ad ea!</p>    </div>  </div></div>

Firefox vs. Chrome discrepency in CSS Grid grid-template-column behavior on image sizes

I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start, chrome behaves the same as Firefox. See updates to codepen and original post for correct code.

Table header height different from chrome to firefox in grid layout

Add align-self: start; to .building-phonebook-table-labs so it won't stretch to full cell-height:

.view-content {  width: 400px;}

/** * Building  Phonebook */
.building-phonebook-table tr td:nth-child(2),.building-phonebook-table tr td:nth-child(3) {  max-width: 100px;}
.building-phonebook-table th {  background: purple;  height: 20px;  line-height: 20px;  overflow: hidden;  color: #fff;}
.building-phonebook-table th,.building-phonebook-table td {  height: 20px;  line-height: 20px;}
.building-phonebook-table {  margin: 0px;  padding: 0px;  border-collapse: collapse;  border-spacing: 0;}
.building-phonebook header {  background: yellow;}

/** * Building-phonebook grid */
main.building-phonebook {  display: grid;  grid-template-areas: "header header" "main side" "other other";  grid-template-columns: auto auto;  grid-template-rows: auto auto;  grid-row-gap: 2px;  grid-column-gap: 2px;}
.building-phonebook header {  grid-area: header;}
.building-phonebook .building-phonebook-table-employees {  grid-area: main;}
.building-phonebook .building-phonebook-table-labs {  grid-area: side;  align-self: start;}

<div class="view-content">  <main class="building-phonebook">    <header>This is header</header>    <table class="building-phonebook-table building-phonebook-table-employees">      <tr>        <th colspan="3">Employees</th>      </tr>      <tr>        <td><strong>Name and Surname</strong></td>        <td><strong>Telephone</strong></td>        <td><strong>Office/Info</strong></td>      </tr>      <tr>        <td colspan="3"><strong>Administration<strong></td>            </tr>            <tr>                <td colspan="3"><strong>Technicians<strong></td>            </tr>            <tr>                <td>name surname1</td>                <td>1234</td>                <td>roomA</td>            </tr>            <tr>                <td>name surname 2</td>                <td>4321</td>                <td>roomB - roomC</td>            </tr>            <tr>                <td colspan="3"><strong>Others Employeees<strong></td>            </tr>            <tr>                <td>name surname 3</td>                <td>5463 - 5478</td>                <td>133</td>            </tr>            <tr>                <td>name surname 4</td>                <td>5468 - 4569 - 213546879</td>                <td>215</td>            </tr>        </table>                    <table class="building-phonebook-table building-phonebook-table-labs" >            <tr><th colspan="2">Labs</th></tr>            <tr>                <td><strong>Name</strong></td>        <td><strong>Telephone</strong></td>      </tr>      <tr>        <td colspan="3"><strong>Labs type 1<strong></td>            </tr>            <tr>                <td>lab 1</td>                <td>4712</td>            </tr>            <tr>                <td>lab 2</td>                <td>4568</td>            </tr>            <tr>                <td colspan="3"><strong>Other Laboratories<strong></td>            </tr>            <tr>                <td>labs banana</td>                <td>7841</td>            </tr>            <tr><td colspan="3"><strong>Services<strong></td></tr>        </table>    </main>    </div>

The relative unit (percentage) cannot be applied by the browser to the space set by fr

If this is not an undefined behavior, which is the correct behavior?

I would say, Firefox is doing correctly here and Chrome is half correct.

First, you can reduce your code to the following as grid-template-rows: 1fr is not needed to have the behavior

.container {  display: grid;  grid-template-columns: 1fr 1fr;  background: red;  gap: 10px;}
img {  width: 100%;  height: 100%;  object-fit: cover;}

<div class="container">  <div class="item">    <img src="https://unsplash.it/450/450">  </div>  <div class="item">    <img src="https://unsplash.it/450/450">    text  </div></div>

Nested CSS grid layout different behavior in Chrome and Firefox

This appears to be a bug in Firefox. But I'm not sure.

Here's what is clear:

1. The fact that you have nested grid containers matters.

   Your second demo, which works in both Chrome and Firefox, has only one grid container.

   The first demo, which only works in Chrome, has nested grid containers. If you eliminate that nesting, and use only one grid container, the layout works in both browsers.

   So, as a possible cross-browser solution, minimize the nesting of grid containers.

   In this revised demo, I've commented out display: grid on the body and .content elements. The only grid container left is on .main, the parent of the red boxes:

   revised demo

html,body {  height: 100%;  width: 100%;  margin: 0 auto;  padding: 0;}
body {  /* display: grid; */  grid-template-columns: 1fr;  grid-template-rows: 100px 1fr 50px;}
.header {  grid-column: 1/2;  grid-row: 1/2;  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 1fr;  background-color: #57324f;}
.header .title {  grid-column: 1/2;  grid-row: 1/2;  align-self: center;  justify-self: center;  width: 100%;  max-width: 1000px;  color: aliceblue;}
.footer {  grid-column: 1/2;  grid-row: 3/4;  display: grid;  grid-template-columns: 1fr;  grid-template-rows: 1fr;  background-color: #57324f;}
.footer .copyright {  grid-column: 1/2;  grid-row: 1/2;  align-self: center;  font-size: 12px;  justify-self: center;  width: 100%;  max-width: 1000px;  color: aliceblue;}
.content {  grid-column: 1/2;  grid-row: 2/3;  /* display: grid; */  grid-template-columns: 1fr;  grid-template-rows: 0;  background-color: aliceblue;}
.content .main {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  grid-gap: 10px;  grid-auto-flow: dense;  justify-self: center;  width: 100%;  margin-top: 10px;  max-width: 1000px;}
.placeholder {    height: 100px;  position: relative;  border: 1px solid red;}

<div class="header">  <div class="title">    <h2>Header</h2>  </div></div><div class="content">  <div class="main">    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>    <div class="placeholder"></div>  </div></div><div class="footer">  <div class="copyright">    <span>Footer</span>  </div></div>

---

Related Topics