How can I make a

Question

There are two containers, myapp-icon (green) and myapp-svg-icon (blue), containing an SVG element (red).

I would expect the blue box to have the same size as the red box, but it's not. What am I doing wrong?

Minimal example:

<html>
<style>
    myapp-icon {
        background: green;
    }

    myapp-svg-icon {
        background: blue;
    }

    svg {
        background: red;
    }
</style>

<body>
    <myapp-icon>
        <myapp-svg-icon>
            <svg height="80" viewBox="0 0 67 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M52.3737 11.0954H51.8242C50.1613 7.38468 47.3573 4.31697 43.8301 2.34953C40.303 0.382096 36.2417 -0.37969 32.2516 0.177742C28.2616 0.735173 24.5565 2.58197 21.6887 5.44281C18.8209 8.30365 16.944 12.0253 16.3378 16.053C14.7917 15.4659 13.143 15.2054 11.4935 15.2877C9.84392 15.37 8.22856 15.7932 6.74701 16.5314C5.26547 17.2695 3.94917 18.3069 2.87933 19.5795C1.80948 20.852 1.00879 22.3328 0.526636 23.9305C0.0444866 25.5282 -0.10889 27.2089 0.0759685 28.8688C0.260827 30.5288 0.780001 32.1328 1.60146 33.5819C2.42292 35.0311 3.52923 36.2946 4.85216 37.2946C6.17508 38.2946 7.68655 39.0098 9.29332 39.3961C10.429 39.7743 11.6146 39.9767 12.8101 39.9963H52.3737C56.1628 39.9963 59.7967 38.4739 62.476 35.7639C65.1553 33.0539 66.6606 29.3784 66.6606 25.5458C66.6606 21.7133 65.1553 18.0378 62.476 15.3278C59.7967 12.6178 56.1628 11.0954 52.3737 11.0954Z"
                    fill="#FFDA33" _ngcontent-wsq-c51=""></path>
            </svg>
        </myapp-svg-icon>
    </myapp-icon>
</body>

</html>

maybe create a variable for parent size, and set that to child size — PythonProgrammer, Jan 19 '22 at 13:33

score 0 · Accepted Answer · answered Jan 19 '22 at 12:26

Add display: block; to your svg CSS...

<html>
<style>
    myapp-icon {
        background: green;
    }

    myapp-svg-icon {
        background: blue;
    }

    svg {
        background: red;
        display: block;
    }
</style>

<body>
    <myapp-icon>
        <myapp-svg-icon>
            <svg height="80" viewBox="0 0 67 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M52.3737 11.0954H51.8242C50.1613 7.38468 47.3573 4.31697 43.8301 2.34953C40.303 0.382096 36.2417 -0.37969 32.2516 0.177742C28.2616 0.735173 24.5565 2.58197 21.6887 5.44281C18.8209 8.30365 16.944 12.0253 16.3378 16.053C14.7917 15.4659 13.143 15.2054 11.4935 15.2877C9.84392 15.37 8.22856 15.7932 6.74701 16.5314C5.26547 17.2695 3.94917 18.3069 2.87933 19.5795C1.80948 20.852 1.00879 22.3328 0.526636 23.9305C0.0444866 25.5282 -0.10889 27.2089 0.0759685 28.8688C0.260827 30.5288 0.780001 32.1328 1.60146 33.5819C2.42292 35.0311 3.52923 36.2946 4.85216 37.2946C6.17508 38.2946 7.68655 39.0098 9.29332 39.3961C10.429 39.7743 11.6146 39.9767 12.8101 39.9963H52.3737C56.1628 39.9963 59.7967 38.4739 62.476 35.7639C65.1553 33.0539 66.6606 29.3784 66.6606 25.5458C66.6606 21.7133 65.1553 18.0378 62.476 15.3278C59.7967 12.6178 56.1628 11.0954 52.3737 11.0954Z"
                    fill="#FFDA33" _ngcontent-wsq-c51=""></path>
            </svg>
        </myapp-svg-icon>
    </myapp-icon>
</body>

</html>

How can I make a parent container adapt to the size of its element?

1 Answers1

How can I make a