为何设置的元素height未生效？从288px被截断至212.975px

我给.qrComponent__link设置了height: 288px，但实际渲染后高度只有212.975px，就算加!important也无法解决，求该现象的原因及修复方案。

原因分析 #

你的.qrComponent是flex容器（display: flex; flex-direction: column;），.qrComponent__link作为它的flex子元素，会受到flex布局的空间分配规则限制：

1. flex容器设置了固定高度499px，减去内边距、子元素的margin及内容高度后，剩余空间不足以容纳288px的.qrComponent__link；
2. flex布局默认会自动压缩子元素的尺寸以适配容器，这导致你设置的固定height被强制覆盖，即使加!important也无法突破flex的布局规则。

修复方案 #

方法1：阻止flex子元素被压缩 #

给.qrComponent__link添加flex-shrink: 0，强制保留你设置的固定高度：

.qrComponent__link {
  display: block;
  height: 288px;
  width: 288px;
  background-color: var(--blue);
  flex-shrink: 0; /* 新增此行 */
}

方法2：让flex容器自适应高度 #

如果不需要.qrComponent固定高度，可以移除height: 499px，让容器根据子元素高度自动调整：

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

完整代码示例 #

CSS代码 #

.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; /* 添加此行 */
}

HTML代码 #

<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>

内容的提问来源于stack exchange，提问作者user3704642