设置width:fit-content的Flex容器在视口缩小时占满空间的原因

问题 #

为id为productofferingCards的Flex容器设置了width:fit-content属性，全屏状态下容器宽度能适配子元素总宽度；但当视口宽度小于920px时，容器会占据全部可用空间，期望容器宽度始终匹配子容器总宽度，请问这一现象的原因是什么？

代码示例 #

CSS代码

#productofferingCards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: 12px solid red;
    width: fit-content;
    margin: auto;
}

.productcards1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9fafb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin: 20px;
    width: fit-content;
}

HTML代码

<section id="productofferingCards">
    <div class="productcards1">
      <a href="">
       <img src="https://www.toppr.com/bytes/wp-content/uploads/2017/08/Better-Toppr-Logo-300x267.jpg" alt="logo"></a>
       <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/productLearnNew.png" alt="">
         <h2>Copmplete Learning app <br> for Schools and exams</h2>
         <p>class 5-12</p>
         <div>
           <p>Explore</p>
             <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/blueRightArrow.svg" alt="Arrow">
         </div>
    </div>
    <div class="productcards1">
      <a href="">
        <img src="https://www.toppr.com/bytes/wp-content/uploads/2017/08/Better-Toppr-Logo-300x267.jpg" alt="logo"></a>
        <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/productLearnNew.png" alt="">
        <h2>Copmplete Learning app <br> for Schools and exams</h2>
        <p>class 5-12</p>
          <div>
            <p>Explore</p>
            <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/blueRightArrow.svg" alt="Arrow">
          </div>
    </div>
</section>

现象说明 #

当视口宽度小于920px时，带有红色边框的容器会占据全部可用空间，如下图所示：

原因与解决方法 #

原因 #

这是flex-wrap: wrap和width: fit-content的组合逻辑导致的：

• 视口足够宽时，子元素横向排列，fit-content计算所有子元素并排的总宽度，容器宽度刚好匹配这个值。
• 视口变窄到920px以下，子元素因flex-wrap: wrap换行成单列。此时fit-content的计算规则是取「子元素最大宽度」和「可用空间」中的最小值，但因为单列子元素的宽度小于视口宽度，浏览器会把容器宽度拉伸到可用空间的最大值——简单说就是换行后，容器没有了横向子元素的宽度限制，fit-content就会占满当前可用的水平空间。

解决方法 #

把容器的display: flex改成display: inline-flex，同时保留margin: 0 auto让它居中，这样容器会以内联块级元素的形式存在，宽度始终由子元素的总宽度决定，不管子元素是否换行：

修改后的容器CSS：

#productofferingCards {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    border: 12px solid red;
    width: fit-content;
    margin: 0 auto;
}

或者也可以给原flex容器添加max-width: fit-content，不过inline-flex的方式更直观，能彻底解决问题。

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