CSS动态高度管理：max(100%, fit-content)替代方案与实践

<div class="flexWrap">
  <div class="parent grow">
    <div class="child">
      <!-- 少量内容 -->
      <p>这是一些内容，它会使得容器至少达到最小高度。</p>
    </div>
  </div>

  <div class="parent grow">
    <div class="child">
      <!-- 大量内容，使得容器超出最小高度并自适应增长 -->
      <p>这是一段非常长的内容，用于演示当内容超出最小高度时，父容器如何自动增长以容纳所有文本。这确保了所有信息都能被完整地展示出来，而不会被截断或隐藏在滚动条后。</p>
      <p>继续添加更多内容，以便更好地观察容器的自适应行为。</p>
      <p>最后一段内容。</p>
    </div>
  </div>
</div>

.flexWrap {
  display: flex;
  flex-direction: row;
  gap: 10px; /* 添加间距 */
  margin-top: 20px;
}

.parent {
  width: calc(50% - 5px); /* 假设父容器占据一半宽度 */
  position: relative; /* 确保百分比高度的子元素能正确计算 */
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box; /* 包含padding和border在宽度内 */
}

.grow {
  min-height: 200px; /* 定义最小高度 */
  background-color: #f0f8ff;
}

.child {
  min-height: 100%; /* 子元素至少填充父元素的100%高度 */
  /* 注意：如果父元素没有固定高度，这里的100%会参考父元素的min-height */
  /* 实际效果是，当内容少于min-height时，子元素会撑开到min-height，
     当内容多于min-height时，父元素会随内容增长，子元素也随之增长 */
}

<div class="flexWrap">
  <div class="parent scroll">
    <div class="child">
      <!-- 少量内容 -->
      <p>这是一些内容，它会使得容器至少达到最小高度。</p>
    </div>
  </div>

  <div class="parent scroll">
    <div class="child">
      <!-- 大量内容，使得容器超出固定高度并出现滚动条 -->
      <p>这是一段非常长的内容，用于演示当内容超出固定高度时，容器如何通过滚动条来展示所有文本。这确保了界面布局的稳定性，同时允许用户访问所有信息。</p>
      <p>继续添加更多内容，以便更好地观察滚动条的行为。</p>
      <p>最后一段内容。</p>
      <p>再来一段，确保滚动条出现。</p>
      <p>最后一段内容。</p>
      <p>再来一段，确保滚动条出现。</p>
    </div>
  </div>
</div>

/* .flexWrap 和 .parent 样式同上 */
.scroll {
  height: 200px; /* 固定高度 */
  overflow: auto; /* 内容超出时显示滚动条 */
  background-color: #fffafa;
}

.scroll .child {
  /* 子元素不再需要min-height: 100%，因为父元素高度已固定 */
  /* 内容会自然撑开子元素，直到超出父元素的固定高度 */
}

<div class="flexWrap">
  <div class="parent image">
    <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="object-fit: cover;" />
  </div>
  <div class="parent image">
    <img src="https://www.w3schools.com/css/paris.jpg" alt="Paris" style="object-fit: contain;" />
  </div>
</div>

/* .flexWrap 和 .parent 样式同上 */
.image {
  height: 200px; /* 固定高度 */
  overflow: hidden; /* 隐藏超出部分 */
  display: flex; /* 辅助图片居中或对齐 */
  justify-content: center;
  align-items: center;
  background-color: #e0ffe0;
}

.image img {
  width: 100%;
  height: 100%;
  /* object-fit 属性直接在 img 标签上设置，或通过类名 */
}