即使父级已设置高度，元素也不会响应设置为百分比的高度

Question

I have been puzzling over this bit of HTML/CSS for hours and I can't figure out where I'm going wrong. It is part of a more complicated layout, but I think I have isolated the problem.

This is my HTML:

<table>
    <tr>
        <td>
            <div class = "outer">
                <div class = "middle">
                    <div class = "inner">
                        <svg viewbox = "0, 0, 250, 250">
                        </svg>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

...and this is my CSS:

* {
    margin: 0px;
    padding: 0px;
}
body,html {
    height: 100%;
    font-family: sans-serif;
    font-size: 12px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;      
    -webkit-text-size-adjust: none; 
}
table {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    min-width: 600px;
    /*table-layout: fixed;*/
    border-collapse: collapse;
    border-spacing: 0;
}

tr {
    background-color: #ffffff;
    height: 100%;
    height: calc(100% - 190px);
}

td {
    height: 100%;
    background-color: red;
    margin: 0;
}

.outer {
    width: 94%;
    width: calc(100% - 20px);
    height: 94%;
    height: calc(100% - 20px);
    background-color: blue;
    display: block;
    margin: 3%;
    margin: calc(10px + 0%);
    overflow-y: scroll;
}
.middle {
    display: white;
    background-color: lightblue;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    height: calc(100%  - 10px - 2.5rem);
    overflow-y: scroll;
}

.inner {
    background-color: pink;
    display: block;
    width: 40%;
    height: 100%;
    overflow: hidden;
}

svg {
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    background-color: salmon;
}

If you remove the SVG, the divs and table behave as I would like - on window resize, the table doesn't exceed the size of the page, and the divs all scale accordingly.

When you include the svg, what I would expect (and what I would want) is for the svg to scale to fit the .inner div, but not to exceed it or alter the flow of the layout in any way. This is not what happens.

I've checked this in Safari and in Firefox, and both give me unexpected but different results. In firefox, if the window shrinks beyond a certain point, the svg height expands and the whole window ends up scrolling.

In Safari, the svg height scales as the width changes, but the width doesn't scale as the height changes.

This seems like a pretty simple thing and I don't really know where I'm going wrong. I am sure it is an obvious rookie error of some sort. I have tried every combination of max/min height/width on the svg.

Thanks for your help!

EDIT: If I get rid of the table (remove the table, td, tr) everything works as expected. Equally, if I get rid of the svg and keep the table, everything works as expected.

Answer 1

As stated here , you can't set a width/height value of auto for an svg element. Use 100% for the height and width instead like this:

svg {
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    background-color: salmon;
}

If the problem still persist, try adding the height and width property as an inline style declaration to the svg and see if that fixes the problem:

<svg style="width:100% max-width:100%; height: 100%; max-height: 100%;" viewbox = "0, 0, 250, 250"></svg>

Answer 2

you missed to give height on tbody

tbody {
    height: 100%;
}

Actually browser automatically add tbody in your table if you not add. you can see this in inspect element