I have a simple layout, with a container that has horizontal and vertical margin as well as a max width and height. On a computer screen, the max width and height makes it so that the margin is basically irrelevant. When I resize the window to be smaller (horizontally), the container eventually takes up the whole screen minus the margin, then gets smaller as well and the margin makes it so that there is some space between its border and the edge of the screen. However, vertically the margin is simply ignored and the container eventually goes right to the edges. I don't understand why that is happening and how I can fix it.
Here is a working example: I am using Tailwind, so that's what I used for the example as well: 
As you can see, the horizontal margin does exist, but it's outside the window/page (or in case of the playground: container which contains the rendered content).
CodePudding user response：
<div >
This is because of h-full class in the element. it has height 100%, that forcing element to render and squeezing the inner content. As scroll has not consider margins thus overflow is not causing, though you have given margins to the inner child.
You can override the css by simply adding custom class or parent class minimum height .customClass.h-full{min-height: 100%;}
CodePudding user response：
You can easily work around this issue by adding an empty element above the container to hold that space like <div ></div> it's top bottom margins are equal to the top margin of your main.my-12