index.tsx
:index.modul.css
:html
and body
, which are in globals.css
:__next
Classdiv
with id __next
between body
and my custom elements. It looks like:div
with id __next
does't have any styles, so if we want to make its child element has a height inhreited, we should also give it some styles just like the part in the globals.css
with a comment:flex
both in body
and div#__next
?flex
helps us a lot, but it can only work when the container is big enough.flex: 1;
is a shorthand for flex-grow: 1;
. The flex-grow
CSS property sets the flex grow factor of a flex item's main size.main sizemain size propertyThe width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size. Its main size property is thus either its width or height property, whichever is in the main dimension. Similarly, its min and max main size properties are its min-width/max-width or min-height/max-height properties, whichever is in the main dimension, and determine its min/max main size.
height: 100%
for html
to make the global container has an initial height. A min-height: 100%
for body
, and this can help long content to grow more than the height set using the same background.div#__next
between body
and custom elements earlier, because of the box model, if we want our custom elements to be flexible, their parents should be flexible first. So flex attributes in the body can make div#__next
with flex: 1;
grow to the height of the page, which is set in html
and body
.div#__next
also flexible, and make the content grow as the main size.body
and custom elements happened in the Next.js, maybe you only need one flexible parent in your own code.