0:00 The MinMax CSS function takes two arguments. The first one represents the min value, and the second one the max value. Let's try and make the third column, this one, respect the actual size of the main panel by wrapping this crazy calc function here inside a MinMax function.

0:17 Here I will go MinMax, and make sure I close the parentheses right here, and we want the range to go from for the min value to the current calc function for the max value. Inside the MinMax here, the first parameter will be zero, and then comma, and we'll pass the calc as the second parameter. Let's save that.

0:36 It's hard to tell if it's working or not because we also have to fix the issue with the first and last column. If we look at the first column, you can see that at some point it completely disappears because 1FR, one fraction of the available space for it, becomes nothing, zero.

0:54 Here it completely disappears, but that's technically not right. Our card always has some padding on the side, on the left and the right, and so here we need to also use MinMax to make sure that we have at least the padding value for the minimum value, and then one fr if this happens to be bigger than the padding.8 value.

1:15 Let's try that for the first 1FR column, MinMax, and the second value will be one FR for the max value, and before that we will want, not zero this time, but theme, padding.8. Let's give it a try now.

1:31 Big screen, all good. Now, this column should have at least a width of padding.8 and not completely collapse. Yep, looks like it's working correctly. We can do the exact same for the last column, this one, wrap it in MinMax with the first value of theme, padding.8, and the second value of 1fr, and moment of truth.

1:56 Now the column should always stick perfectly to the card, no matter what the width of the viewport is. Let's try it out. Shrink, shrink, shrink, and check this out. It's working perfectly until the snap point at 480. Amazing.