Элемент меняет размер, даже если установлены ширина и высота. ⇐ CSS

[Anonymous]

В примере ниже внутри «родительского» элемента div находится SVG. При нажатии на SVG к элементу «parent» добавляется элемент div «my-div». Я ожидал, что SVG останется того же размера, а «my-div» займет оставшуюся высоту внутри «родителя». Вместо этого добавление «my-div» приводит к уменьшению размера SVG. Почему это происходит? У меня есть атрибуты ширины и высоты SVG, установленные на определенное число. Кроме того, это не включено в пример, но я попробовал установить CSS-стили ширины и высоты SVG на 50 пикселей каждый, чтобы посмотреть, решит ли это проблему, но это не помогло.
Это поведение не характерно для элементов SVG. Я также попробовал отключить SVG для элемента div и столкнулся с тем же поведением.

Код: Выделить всё

const circle = document.querySelector('.my-svg')
const parent = document.querySelector('.parent')

circle.addEventListener('click', () => {
const existing = document.querySelector('.my-div')

if (existing) {
existing.remove()
} else {
const myDiv = document.createElement('div')
myDiv.setAttribute('class', 'my-div')

parent.prepend(myDiv)
}
})

Код: Выделить всё

.parent {
display: flex;
flex-direction: column;
height: 200px;
position: absolute;
justify-content: flex-end;
background-color: yellow;
}

.my-div {
width: 100%;
height: 100%;
background-color: blue;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/786 ... ht-are-set