Why Does Minmax(0, 1Fr) Work For Long Elements While 1Fr Doesn'T

Why does minmax(0, 1fr) work for long elements while 1fr doesn't?

Because 1fr is equivalent to minmax(auto, 1fr), by default.

When you use minmax(0, 1fr), that's something different than standalone 1fr.

In the first case, the track cannot be smaller than the size of the grid item (min size is auto).

In the second case, the track is free to resize to a 0 width/height.

More details:

Reconsider the meaning of 1fr
Prevent grid area from expanding causing whole page to scroll

Understanding overflow / minmax behaviour in CSS grid

The reason for the overflow is a column-gap rule in the nested grid .stats__content.

.stats__content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  column-gap: 4rem; <----- CULPRIT
  row-gap: 3rem;
  background-color: white;
  padding: 2rem 0.1rem 0.1rem 0.1rem;
}

Being that it's a fixed width, repeated 15 times (because gaps only go between tracks, not between tracks and container edges), an overflow is inevitable in this case.

(4rem) * (15 gaps) = 60rem of inflexible width

Reduce the number of gaps or find another solution for separating the items.

css grid grows over 100% width with fr but not with minmax

Solution:

Setting min-width:0 of .break-long-text container will do the trick.

.small-container { width: 200px; }.small-container > div { margin: 16px; }.border { box-shadow: 0 0 2px 2px black; }
.min-width-0{    min-width: 0;}.break-long-text {    width: 100%;    word-wrap: break-word;    overflow-wrap: break-word;}
.grid-fr {    display: grid;    grid-template-columns: 1fr;}
.grid-minmax {    display: grid;    grid-template-columns: minmax(120px, 1fr);}

<div class="small-container">  <div class="grid-fr">    <div class="break-long-text border min-width-0">      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG    </div>  </div>  <div class="grid-fr">    <div class="break-long-text border">      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG    </div>  </div>  <div class="grid-minmax">    <div class="break-long-text border">      LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG    </div>  </div></div>

Why are img tags, when grid-items, with height/width set to 100%, not constrained to their cell when their cell's set with fr units?

The reason behind it is as follows:

1fr is actually interpreted as if you define minmax(auto, 1fr). The minmax() function takes two arguments and specifies that if the first argument happens to resolve to being larger than the second argument ( auto > 1fr ), the whole minmax expression gets replaced by the first argument.

So:

1fr

actually is

minmax(auto, 1fr)

which, when auto is larger than 1fr, turns into

auto

There is two ways you can resolve this:

Either, apply an explicit min-height resp. min-width to the grid items.
Or, and this is what I've been using for years, in your grid definitions, whenever there's the risk of a grid element exceeding the fractional grid track height or width, instead of 1fr use minmax(0, 1fr) (or, instead of 0, whatever is an appropriate value for the grid cell).

In CSS Grid why is 1FR+9FR not behaving the same as 10FR in small screen sizes?

Add min-width:0 to input and you should fix the percentage value so they are exacltly the same as the fr. You have 31fr so 1fr is about 100/31 = 3.225%

.A {  grid-area: a;}
.B {  grid-area: b;}
.C {  grid-area: c;}
.Exchange_Row {  display: grid;  grid-template-columns: 1fr 9fr 10fr 10fr 1fr;  grid-template-areas: "a a b c ."}.Exchange_Row.percentage { grid-template-columns:  3.225% 29.03% 32.25% 32.25% 3.225%;}
input[type=text] {  border: solid;  min-width:0;}

<div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">  <div id="currencyRow" class="Exchange_Row">    <input type="text" class="A" value="A" />    <input type="text" class="B" value="B" />    <input type="text" class="C" value="C" />  </div></div><div style="width: 90%; border: solid; border-radius: 5px; padding: 5px;">  <div id="currencyRow" class="Exchange_Row percentage">    <input type="text" class="A" value="A" />    <input type="text" class="B" value="B" />    <input type="text" class="C" value="C" />  </div></div>

What is the difference in grid-template-columns between fractions smaller than 1 to higher than 1?

To understand this you need to understand a tricky behavior related to 1fr. 1fr is equivalent to minmax(auto,1fr) as explained here: Why does minmax(0, 1fr) work for long elements while 1fr doesn't? which means "the track cannot be smaller than the size of the grid item"

You are wondering how this answer your question so Let's start with an example to illustrate the issue.

.gizim{
  display: grid;
  grid-template-columns: 0.3fr 0.4fr 0.3fr;
  margin: 5px auto;
  grid-gap: 1em;
  width: 400px;
  border:1px solid;
}

.gizim div {
  border: 1px solid red;
  min-height:20px;
}

.alt {
  grid-template-columns: minmax(0,0.3fr) minmax(0,0.4fr) minmax(0,0.3fr);
}

<div class="gizim">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="gizim">
  <div>1</div>
  <div>2</div>
  <div>333333333333333</div>
</div>
<div class="gizim alt">
  <div>1</div>
  <div>2</div>
  <div>333333333333333</div>
</div>

Force CSS grid to make all the rows their respective height (in fractional units)

As Zohir Salak said, fr is equivalent to minmax(auto, xfr) instead use minmax(0, xfr) to fix the problem.
So I fixed it by doing grid-template-rows:minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr)

Why doesn't `width:100%; height:100%; object-fit: contain;` make a video fit its container?

`1fr`

The first thing you need to know is that 1fr is equivalent to minmax(auto, 1fr), meaning that the container won't be smaller than its content, by default.

So, start by replacing 1fr with minmax(0, 1fr). That will solve the overflow problem.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: 100%;
  grid-template-rows: max-content minmax(0, 1fr) max-content;
}

.container div {
  border: 1px solid red;
}

.videoContainer {
  background-color: black;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="container">
  <div>This is the header</div>
  <div class="videoContainer">
    <video width="400" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>
  </div>
  <div>This is the footer</div>
</div>

Why Does Minmax(0, 1Fr) Work For Long Elements While 1Fr Doesn'T