body, which are in
bodyand my custom elements. It looks like:
__nextdoes'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.csswith a comment:
flexhelps us a lot, but it can only work when the container is big enough.
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.
htmlto make the global container has an initial height. A
body, and this can help long content to grow more than the height set using the same background.
bodyand 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
flex: 1;grow to the height of the page, which is set in
div#__nextalso flexible, and make the content grow as the main size.
bodyand custom elements happened in the Next.js, maybe you only need one flexible parent in your own code.