Не могу понять, почему высота элемента не та, которую я установил. ⇐ CSS

[Anonymous]

По какой-то причине высота моего элемента была уменьшена с 288 пикселей до 212,975 пикселей (даже когда я использовал !important), и я не знаю, почему и в чем проблема. Почему оно обрезано до такого значения и как это исправить?

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

.attribution {
font-size: 11px;
text-align: center;
}

.attribution a {
color: hsl(228, 45%, 44%);
}

.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

:root {
/* color-scheme */
--white: hsl(0, 0%, 100%);
--Slate300: hsl(212, 45%, 89%);
--Slate500: hsl(216, 15%, 48%);
--Slate900: hsl(218, 44%, 22%);
--blue: hsl(216, 97%, 59%);
}

*::before,
*,
*::after {
box-sizing: border-box;
}

p {
font-size: 15px;
font-family: "Outfit", sans-serif;
}

body {
background-color: var(--Slate300);
}

.qrComponent {
background-color: var(--white);
border-radius: 20px;
height: 499px;
width: 320px;
padding: 16px;
display: flex;
flex-direction: column;
}

.qrComponent__content {
margin-top: 20px;
padding: 0 16px;
margin-bottom: 40px;
}

.qrComponent__image {
display: block;
height: 100%;
width: 100%;
border-radius: 20px;
}

.qrComponent__link {
display: block;
height: 288px;
width: 288px;
background-color: var(--blue);
}

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

 QR component 





[url=https://www.frontendmentor.io/]
[img]/qr-code-component-main/images/image-qr-code.png[/img]
[/url]

 Improve your front-end skills by building projects 

 Scan the QR code to visit Frontend Mentor and take your coding skills to the next level






Challenge by [url=https://www.frontendmentor.io?ref=challenge] Frontend Mentor [/url]. Coded by [url=https://www.frontendmentor.io/profile/Nitr0Skay] Nitr0Skay [/url].

Подробнее здесь: https://stackoverflow.com/questions/790 ... -set-it-to