In Nested Grid Layouts with flexible rows, why do I need two `overflow:auto` for scrollbars [duplicate]
This question already has an answer here:
Prevent content from expanding grid items
2 answers
How come minmax(0, 1fr) works for long elements while 1fr doesn't?
1 answer
While designing grids, there is a peculiarity I've observed which I can't explain, or find a clear-cut reason for in the grid spec. Consider a layout with nested grids, with the parent grid having a row with height defined in fr units. This flexible-sized row contains the child grid which contains one row with a percent-based height (say 100%). This row contains a content cell which can have a lot of content which can overflow, thus we need to show scrollbar for this content cell.
For the content cell to have a scrollbar, I find myself needing to add the overflow: auto property not just to the content cell, but also to the child-grid cell (content div's parent). Nothing else works to give me a scrollable div.
Some more things I've tried:
1. setting height: 100% on the content cell doesn't work. I think it's probably because the parent-grid's row is fr sized, so the height is computed dynamically (somewhat like height: auto), thus any child div can't use percent-based heights.
2. setting the max-height property on the child-grid. It feels logically right, it would simply calculate the height from the parent grid and not overflow that. But even this doesn't work.
I made this small example to illustrate what I mean to say:
https://codepen.io/kumarharsh/pen/qQmwQB
.parent-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 100%;
height: 100px;
border: 2px solid #f00;
}
.child-grid {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
background-color: red;
overflow: auto;
}
.content {
background-color: grey;
overflow: auto;
}
.no-overflow-auto {
overflow: initial;
}
.height-100 {
height: 100%;
}
.max-height-100 {
max-height: 100%;
}
.data {
padding: 1em;
}
p {
background-color: #ccc;
padding: 1em;
margin-top: 0;
}<div class="parent-grid">
<div class="child-grid">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p>
<div class="parent-grid">
<div class="child-grid">
<div class="content no-overflow-auto">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto">
<div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Child-grid - max-height:100%</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content height-100">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Content - height:100%</p>All the grids are exactly the same, but the second grid doesn't have an overflow:auto applied to the content cell, the third one doesn't have an overflow:auto on the child-grid, the fourth one has height:100% applied to the content div and last one has max-height:100% applied to the child-grid.
So it feels like the overflow:auto of the child-grid is just there to force-set a definite height for the content div so that scrollbars appear. But this is just a conjecture.
Can someone explain why it's necessary to specify overflow:auto on both the child-grid and content in such a layout?
html css css-grid
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 17:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Prevent content from expanding grid items
2 answers
How come minmax(0, 1fr) works for long elements while 1fr doesn't?
1 answer
While designing grids, there is a peculiarity I've observed which I can't explain, or find a clear-cut reason for in the grid spec. Consider a layout with nested grids, with the parent grid having a row with height defined in fr units. This flexible-sized row contains the child grid which contains one row with a percent-based height (say 100%). This row contains a content cell which can have a lot of content which can overflow, thus we need to show scrollbar for this content cell.
For the content cell to have a scrollbar, I find myself needing to add the overflow: auto property not just to the content cell, but also to the child-grid cell (content div's parent). Nothing else works to give me a scrollable div.
Some more things I've tried:
1. setting height: 100% on the content cell doesn't work. I think it's probably because the parent-grid's row is fr sized, so the height is computed dynamically (somewhat like height: auto), thus any child div can't use percent-based heights.
2. setting the max-height property on the child-grid. It feels logically right, it would simply calculate the height from the parent grid and not overflow that. But even this doesn't work.
I made this small example to illustrate what I mean to say:
https://codepen.io/kumarharsh/pen/qQmwQB
.parent-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 100%;
height: 100px;
border: 2px solid #f00;
}
.child-grid {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
background-color: red;
overflow: auto;
}
.content {
background-color: grey;
overflow: auto;
}
.no-overflow-auto {
overflow: initial;
}
.height-100 {
height: 100%;
}
.max-height-100 {
max-height: 100%;
}
.data {
padding: 1em;
}
p {
background-color: #ccc;
padding: 1em;
margin-top: 0;
}<div class="parent-grid">
<div class="child-grid">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p>
<div class="parent-grid">
<div class="child-grid">
<div class="content no-overflow-auto">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto">
<div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Child-grid - max-height:100%</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content height-100">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Content - height:100%</p>All the grids are exactly the same, but the second grid doesn't have an overflow:auto applied to the content cell, the third one doesn't have an overflow:auto on the child-grid, the fourth one has height:100% applied to the content div and last one has max-height:100% applied to the child-grid.
So it feels like the overflow:auto of the child-grid is just there to force-set a definite height for the content div so that scrollbars appear. But this is just a conjecture.
Can someone explain why it's necessary to specify overflow:auto on both the child-grid and content in such a layout?
html css css-grid
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 17:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
A grid item cannot be smaller than its content, by default (min-height: auto). Withoverflow: auto(ormin-height: 0), that default is overridden. Also1fris equivalent tominmax(auto, 1fr)(min is set to content length). When that becomes a problem, instead of1fr, useminmax(0, 1fr).
– Michael_B
Nov 15 '18 at 17:37
1
Thanks for the linked duplicates which link to the W3C discussions on this.
– kumar_harsh
Nov 16 '18 at 5:33
add a comment |
This question already has an answer here:
Prevent content from expanding grid items
2 answers
How come minmax(0, 1fr) works for long elements while 1fr doesn't?
1 answer
While designing grids, there is a peculiarity I've observed which I can't explain, or find a clear-cut reason for in the grid spec. Consider a layout with nested grids, with the parent grid having a row with height defined in fr units. This flexible-sized row contains the child grid which contains one row with a percent-based height (say 100%). This row contains a content cell which can have a lot of content which can overflow, thus we need to show scrollbar for this content cell.
For the content cell to have a scrollbar, I find myself needing to add the overflow: auto property not just to the content cell, but also to the child-grid cell (content div's parent). Nothing else works to give me a scrollable div.
Some more things I've tried:
1. setting height: 100% on the content cell doesn't work. I think it's probably because the parent-grid's row is fr sized, so the height is computed dynamically (somewhat like height: auto), thus any child div can't use percent-based heights.
2. setting the max-height property on the child-grid. It feels logically right, it would simply calculate the height from the parent grid and not overflow that. But even this doesn't work.
I made this small example to illustrate what I mean to say:
https://codepen.io/kumarharsh/pen/qQmwQB
.parent-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 100%;
height: 100px;
border: 2px solid #f00;
}
.child-grid {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
background-color: red;
overflow: auto;
}
.content {
background-color: grey;
overflow: auto;
}
.no-overflow-auto {
overflow: initial;
}
.height-100 {
height: 100%;
}
.max-height-100 {
max-height: 100%;
}
.data {
padding: 1em;
}
p {
background-color: #ccc;
padding: 1em;
margin-top: 0;
}<div class="parent-grid">
<div class="child-grid">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p>
<div class="parent-grid">
<div class="child-grid">
<div class="content no-overflow-auto">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto">
<div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Child-grid - max-height:100%</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content height-100">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Content - height:100%</p>All the grids are exactly the same, but the second grid doesn't have an overflow:auto applied to the content cell, the third one doesn't have an overflow:auto on the child-grid, the fourth one has height:100% applied to the content div and last one has max-height:100% applied to the child-grid.
So it feels like the overflow:auto of the child-grid is just there to force-set a definite height for the content div so that scrollbars appear. But this is just a conjecture.
Can someone explain why it's necessary to specify overflow:auto on both the child-grid and content in such a layout?
html css css-grid
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
This question already has an answer here:
Prevent content from expanding grid items
2 answers
How come minmax(0, 1fr) works for long elements while 1fr doesn't?
1 answer
While designing grids, there is a peculiarity I've observed which I can't explain, or find a clear-cut reason for in the grid spec. Consider a layout with nested grids, with the parent grid having a row with height defined in fr units. This flexible-sized row contains the child grid which contains one row with a percent-based height (say 100%). This row contains a content cell which can have a lot of content which can overflow, thus we need to show scrollbar for this content cell.
For the content cell to have a scrollbar, I find myself needing to add the overflow: auto property not just to the content cell, but also to the child-grid cell (content div's parent). Nothing else works to give me a scrollable div.
Some more things I've tried:
1. setting height: 100% on the content cell doesn't work. I think it's probably because the parent-grid's row is fr sized, so the height is computed dynamically (somewhat like height: auto), thus any child div can't use percent-based heights.
2. setting the max-height property on the child-grid. It feels logically right, it would simply calculate the height from the parent grid and not overflow that. But even this doesn't work.
I made this small example to illustrate what I mean to say:
https://codepen.io/kumarharsh/pen/qQmwQB
.parent-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 100%;
height: 100px;
border: 2px solid #f00;
}
.child-grid {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
background-color: red;
overflow: auto;
}
.content {
background-color: grey;
overflow: auto;
}
.no-overflow-auto {
overflow: initial;
}
.height-100 {
height: 100%;
}
.max-height-100 {
max-height: 100%;
}
.data {
padding: 1em;
}
p {
background-color: #ccc;
padding: 1em;
margin-top: 0;
}<div class="parent-grid">
<div class="child-grid">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p>
<div class="parent-grid">
<div class="child-grid">
<div class="content no-overflow-auto">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto">
<div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Child-grid - max-height:100%</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content height-100">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Content - height:100%</p>All the grids are exactly the same, but the second grid doesn't have an overflow:auto applied to the content cell, the third one doesn't have an overflow:auto on the child-grid, the fourth one has height:100% applied to the content div and last one has max-height:100% applied to the child-grid.
So it feels like the overflow:auto of the child-grid is just there to force-set a definite height for the content div so that scrollbars appear. But this is just a conjecture.
Can someone explain why it's necessary to specify overflow:auto on both the child-grid and content in such a layout?
This question already has an answer here:
Prevent content from expanding grid items
2 answers
How come minmax(0, 1fr) works for long elements while 1fr doesn't?
1 answer
.parent-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 100%;
height: 100px;
border: 2px solid #f00;
}
.child-grid {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
background-color: red;
overflow: auto;
}
.content {
background-color: grey;
overflow: auto;
}
.no-overflow-auto {
overflow: initial;
}
.height-100 {
height: 100%;
}
.max-height-100 {
max-height: 100%;
}
.data {
padding: 1em;
}
p {
background-color: #ccc;
padding: 1em;
margin-top: 0;
}<div class="parent-grid">
<div class="child-grid">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p>
<div class="parent-grid">
<div class="child-grid">
<div class="content no-overflow-auto">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto">
<div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Child-grid - max-height:100%</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content height-100">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Content - height:100%</p>.parent-grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 100%;
height: 100px;
border: 2px solid #f00;
}
.child-grid {
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
background-color: red;
overflow: auto;
}
.content {
background-color: grey;
overflow: auto;
}
.no-overflow-auto {
overflow: initial;
}
.height-100 {
height: 100%;
}
.max-height-100 {
max-height: 100%;
}
.data {
padding: 1em;
}
p {
background-color: #ccc;
padding: 1em;
margin-top: 0;
}<div class="parent-grid">
<div class="child-grid">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p>
<div class="parent-grid">
<div class="child-grid">
<div class="content no-overflow-auto">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto">
<div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Child-grid - max-height:100%</p>
<div class="parent-grid">
<div class="child-grid no-overflow-auto max-height-100">
<div class="content height-100">
<div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div>
</div>
</div>
</div>
<p>Content - height:100%</p>html css css-grid
html css css-grid
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
asked Nov 15 '18 at 17:08
kumar_harshkumar_harsh
13.2k65686
13.2k65686
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 17:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Michael_B css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 15 '18 at 17:38
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
A grid item cannot be smaller than its content, by default (min-height: auto). Withoverflow: auto(ormin-height: 0), that default is overridden. Also1fris equivalent tominmax(auto, 1fr)(min is set to content length). When that becomes a problem, instead of1fr, useminmax(0, 1fr).
– Michael_B
Nov 15 '18 at 17:37
1
Thanks for the linked duplicates which link to the W3C discussions on this.
– kumar_harsh
Nov 16 '18 at 5:33
add a comment |
1
A grid item cannot be smaller than its content, by default (min-height: auto). Withoverflow: auto(ormin-height: 0), that default is overridden. Also1fris equivalent tominmax(auto, 1fr)(min is set to content length). When that becomes a problem, instead of1fr, useminmax(0, 1fr).
– Michael_B
Nov 15 '18 at 17:37
1
Thanks for the linked duplicates which link to the W3C discussions on this.
– kumar_harsh
Nov 16 '18 at 5:33
1
1
A grid item cannot be smaller than its content, by default (
min-height: auto). With overflow: auto (or min-height: 0), that default is overridden. Also 1fr is equivalent to minmax(auto, 1fr) (min is set to content length). When that becomes a problem, instead of 1fr, use minmax(0, 1fr).– Michael_B
Nov 15 '18 at 17:37
A grid item cannot be smaller than its content, by default (
min-height: auto). With overflow: auto (or min-height: 0), that default is overridden. Also 1fr is equivalent to minmax(auto, 1fr) (min is set to content length). When that becomes a problem, instead of 1fr, use minmax(0, 1fr).– Michael_B
Nov 15 '18 at 17:37
1
1
Thanks for the linked duplicates which link to the W3C discussions on this.
– kumar_harsh
Nov 16 '18 at 5:33
Thanks for the linked duplicates which link to the W3C discussions on this.
– kumar_harsh
Nov 16 '18 at 5:33
add a comment |
0
active
oldest
votes
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
A grid item cannot be smaller than its content, by default (
min-height: auto). Withoverflow: auto(ormin-height: 0), that default is overridden. Also1fris equivalent tominmax(auto, 1fr)(min is set to content length). When that becomes a problem, instead of1fr, useminmax(0, 1fr).– Michael_B
Nov 15 '18 at 17:37
1
Thanks for the linked duplicates which link to the W3C discussions on this.
– kumar_harsh
Nov 16 '18 at 5:33