Flex: 1 is invalid in flex layout?

Code Preview

as above, set the height of wrapper to 100vh for column layout. The height of the content is the remaining height of the flex:1, fill bottom. This should have been the result

but it actually shows that the inner height exceeds the remaining height of the wrapper, which makes the content stretch into the height of the inner, instead of filling the wrapper minus the remaining height of the bottom

what should I do with it?

Feb.14,2022

because overflow:scroll is not written in the part where you set up flex:1


you first check to see if the margin, of html,body is cleared. If not, take a look at it and see the effect.

demo


https://codepen.io/oceanzh/pe.

there is generally no problem. Check to see if there are any other css attributes affecting it, and whether it is a browser compatibility problem

.
Menu