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>