0

I'm observing different behavior of this code in Chrome and in Firefox: HTML :

.container{
    display: grid;
    grid-template-columns: 40px 50px 500px 50px 40px;
    grid-template-rows: 25% 100px auto;
    background-color: violet;
}
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
  <div class="item item-10">10</div>
  <div class="item item-11">11</div>
  <div class="item item-12">12</div>
</div>

So, in Chrome:

  • items 11 and 12 do not have violet background (why?)
  • height of first row is 34.2px (why? )

In Firefox:

  • items 11 and 12 do have violet background (as it should be in my opinion)
  • height of first row is 18.4px which is a height of the item in div, and it's a right behavior in my opinion

Any ideas why this is happening ?

Community
  • 1
  • 1
Noob
  • 2,247
  • 4
  • 20
  • 31
  • it's all about the percentage used in the first row ... you don't have a reference for it – Temani Afif Jun 08 '19 at 09:10
  • @TemaniAfif yes, i understand that but i think that height in this case should be the same in both browsers – Noob Jun 08 '19 at 09:15
  • Firefox is simply ignoring the percentage value and compute the value as auto whereas chrome is doing an extra effort to compute that value based on the height of the row defined before the percentage (auto) thus you have the overflow. Both behavior are logical – Temani Afif Jun 08 '19 at 09:17
  • 1
    closely related: https://stackoverflow.com/a/53658807/8620333 – Temani Afif Jun 08 '19 at 09:19
  • @TemaniAfif i see, how about background issue ? – Noob Jun 08 '19 at 09:19
  • the background issue is due to the overflow. When chrome is calculating the percentage height based on the first height defined you will have overflow, so content will be pushed outside – Temani Afif Jun 08 '19 at 09:20
  • 1
    the related question seems to be a good duplicate, I am also explaining the overflow and background issue ... Michael_B is also giving a good explanation with some reference – Temani Afif Jun 08 '19 at 09:24

1 Answers1

0

If there is no Height specified to the ".container" grid then percentage will be treated as auto. I think that is the reason for this behavior.

.container{
    display: grid;
    grid-template-columns: 40px 50px 500px 50px 40px;
    grid-template-rows: auto 100px auto;
    background-color: violet;
}
<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
  <div class="item item-10">10</div>
  <div class="item item-11">11</div>
  <div class="item item-12">12</div>
</div>
Mileesh M S
  • 84
  • 6