时间戳

首页 > 解决方案 > min-height : min-content 在 chrome 和 firefox 中不起作用

html - min-height : min-content 在 chrome 和 firefox 中不起作用

问题描述

这是我的代码和 min-height:min-content 不起作用，我使用工作草案文档-> CSS Box Sizing Module Level 3

article {
 border:1px solid blue;
}

article * {
  border: 1px solid red;
}
<article style="height:100px; min-height:min-content;">
  <aside style="height: 200px;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

但是如果不使用 min-content ，它会起作用，例如

article {
  border: 1px solid blue;
}

article * {
  border: 1px solid red;
}
<article style="height:100px; min-height:400px;">
  <aside style="height: 200px;">
    <div style="height: 150px;"></div>
  </aside>
  <section style="height: 30px;"></section>
</article>

标签： htmlcssgoogle-chromefirefox

解决方案

min-height: min-content当为元素设置了明确的高度时，它似乎不起作用。

但是，如果我们轮换这些值：

height: min-content; min-height: 100px;

事情似乎按预期工作。即元素的高度不会小于 100 像素，否则它将采用最小内容高度。

<!DOCTYPE html>
<html>
    <body>
        <article style="height:100px; min-height:500px; background-color:cyan;">
          <aside style="height: 200px;">
            <div style="height: 150px;"></div>
          </aside>
          <section style="height: 30px;"></section>
        </article>
    </body>
</html>

推荐阅读