The element which you bound to a specific height or width, is always of that height & width, even in your given example if you see in inspect mode then you'll find the height & width to be 500px, But the issue which you are facing is happening because of the overflow behavior
of the element, the overflow behavior of an element can be defined through the overflow
attribute of css, by default It's set to visible
, meaning even if any children/content overflows out of your container It'll still be visible as like your facing, to fix it you can set the overflow
attribute of the container to hidden
, It'll make sure that any content, that gets out of container is not shown, For more information about overflow
attribute you might visit this