Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS
grid-template-columns: repeat(16, minmax(0,1fr));Within the element called container, there are two main elements - summary-wrapper and stats-wrapper
The grid within the container is defined as follows:
.container {
display: grid;
grid-template-columns: repeat(16, 1fr);
column-gap: 4rem;
row-gap: 4rem;
padding: 5rem;
width: 100%;
}
The element summary-wrapper occupies grid-column: 1/11; (line 96) and
stats-wrapper takes up grid-column: 11/17; (line 25)
Mentally changing the grid column of stats-wrapper to grid-column: 12/17 should simply move the start point of the element. This works in Chrome:
Chrome (no overflow):
https://i.sstatic.net/h6yQL.png
However, in Firefox:
https://i.sstatic.net/eTo5H.png
The differing behavior between browsers raises questions about my understanding of how grid containers function. Although this issue has been encountered before, following a fix for inputs, the problem persists with nested grids despite using
grid-template-columns: repeat(16, minmax(0,1fr));https://i.sstatic.net/8mI1H.png
The inability to understand why certain elements need to overflow remains perplexing. Even after attempting a fix using minmax(0,1fr), which supposedly ensures that items do not exceed their designated space, the issue continues to persist.
Puzzling over the situation, as the items stats__section--viewed, stats__section--applications, and stats__section--trend seemingly have no minimum size apart from their text content.
This conundrum leaves me at a loss!
Any assistance would be greatly appreciated!