As I dive into CSS, I've come across some perplexing issues with SVG images. It seems that certain SVGs will automatically expand to the full width of a webpage if their dimensions are left unspecified, while others maintain a defined size. What is this property referred to as? Is it connected to the design of the SVG image? Check out an example here
Furthermore, when I place a full-width SVG inside a flex box, its size decreases. Why does this happen? Unlike a normal image or an SVG with specified dimensions, they do not shrink in the same circumstances. See this behavior in action with this example (fixed by adding class = "flex" instead of id).
I'm also curious about how the computer decides what size the SVG should shrink to. After experimenting with various full-width SVGs, most of them seem to reduce to approximately 150px x 150px in the flex box.