SVG set to 100% height causes overflow in div. Why? [duplicate] - html

Question

This question already has answers here:
How to get rid of extra space below svg in div element
(9 answers)
Closed 8 months ago.
I am trying to make SVG "canvas" full width & height of the container, which is a div.
SVG is set in CSS to be 100% width and height. Container div is set to 100vw and 100vh width and height respectively. Margin: 0. Padding: 0. No borders. The SVG overflows, but when I set it to 99% height, it does not.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
svg {
width: 100%;
height: 100%; /* overflows */
/* height: 99%; does not overflow*/
}
div {
background-color: aliceblue;
width: 100vw;
height: 100vh;
}
<div id="chart-area">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="1" fill="yellow" />
</svg>
</div>

Answer 1

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
svg {
width: 100%;
height: 100%; /* overflows */
/* height: 99%; does not overflow*/
display:block;
/* margin-bottom:-5px; will work also*/
}
div {
background-color: aliceblue;
width: 100vw;
height: 100vh;
}
<div id="chart-area">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="1" fill="yellow" />
</svg>
</div>
if you add display block or 5px negative margin to the svg it'll work perfectly.
The explanation is that inline elements sit on the text baseline. The extra vertical space is for character descenders.
check this link for more info