时间戳

首页 > 解决方案 > 当定义为百分比时，我需要使用宽度和最小宽度进行说明

css - 当定义为百分比时，我需要使用宽度和最小宽度进行说明

问题描述

当容器的值被定义为百分比时，我试图了解容器的宽度和最小宽度之间的差异。考虑下面的例子。我首先定义一个容器，给它一个等于主体宽度 50% 的宽度和 25% 的最小宽度。但是，在调整浏览器大小时，它不会缩小到我定义的最小宽度。只有当最小宽度被赋予 ems、rems 或像素值时，它才能按预期工作并且容器缩小到定义的最小宽度。任何人都可以阐明为什么它会这样吗？更具体地说，为什么使用低于定义宽度的百分比设置 min-width 不会产生任何结果？谢谢

  <style>
  * {
    margin: 0;
    border: 0;
  }
  .container {
    width: 30%;
    min-width: 160px;
    height: 200px;
    background-color: beige;
    border: 1px solid black;
  }
  nav > ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  nav li {
    text-align: center;
    flex: 1 1 auto;
    padding: 0.3rem;
  }
</style>
 <body>
<div class="container">
  <nav>
    <ul>
      <li>New Testament</li>
      <li>Old Testament</li>
    </ul>
  </nav>
</div>

标签： css

解决方案

推荐阅读