htmlcssheight

Can't figure out why element's height is not what I set it to

The height of my element was cut from 288px to 212.975px for some reason (even while I using !important) and I don't know why and where the problem is. Why is it cut to this value and how to fix that?

enter image description here

.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);
}
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<header>
  <div class="attribution visuallyhidden">
    <h1> QR component </h1>
  </div>
</header>

<main>
  <section class="qrComponent">
    <a href="https://www.frontendmentor.io/" class="qrComponent__link">
      <img src="/qr-code-component-main/images/image-qr-code.png" alt="frontendmentor.io" class="qrComponent__image" />
    </a>

    <div class="qrComponent__content">
      <h2> Improve your front-end skills by building projects </h2>

      <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
    </div>
  </section>
</main>

<footer>
  <div class="attribution visuallyhidden">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://www.frontendmentor.io/profile/Nitr0Skay"> Nitr0Skay </a>.
  </div>
</footer>

Solution

  • By default, every element is styled with flex-shrink: 1 which means that if it happens to be a flexbox item, it will shrink in size rather than causing the flexbox to overflow.

    You can override this style to prevent this behaviour. Just add the following declaration:

    .qrComponent__link {
  flex-shrink: 0;
}

    Note that I was unable to reproduce this problem in Safari, so it seems that Safari and Chrome have some rendering differences.

    .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);
  flex-shrink: 0;
}
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
<header>
  <div class="attribution visuallyhidden">
    <h1> QR component </h1>
  </div>
</header>

<main>
  <section class="qrComponent">
    <a href="https://www.frontendmentor.io/" class="qrComponent__link">
      <img src="/qr-code-component-main/images/image-qr-code.png" alt="frontendmentor.io" class="qrComponent__image" />
    </a>

    <div class="qrComponent__content">
      <h2> Improve your front-end skills by building projects </h2>

      <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
    </div>
  </section>
</main>

<footer>
  <div class="attribution visuallyhidden">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"> Frontend Mentor </a>. Coded by <a href="https://www.frontendmentor.io/profile/Nitr0Skay"> Nitr0Skay </a>.
  </div>
</footer>