CSS calc()函数百分比失效问题：rem生效原因解析

代码示例 #

CSS 代码

.calendar{
  height: 40%;
  width: 40%;
  background-color: #fff;
  color: lightgray;
  border-radius: 10px;
}
.days{
  display: flex;
  flex-wrap: wrap;
  padding-inline: .2rem;
}
.days div{
  font-size: .875rem;
  width: calc((40% - .4rem) / 7);
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML 代码

<div class="calendar">
  <div class="month">
    <div class="date">
      <h1>JUNE</h1>
      <p>Wed Jun 08 2023</p>
    </div>
  </div>
  <div class="weekdays">
     <div>Mon</div>
     <div>Tue</div>
     <div>Wed</div>
     <div>Thu</div>
     <div>Fri</div>
     <div>Sat</div>
     <div>Sun</div>
  </div>
  <div class="days">
    <div class="empty"></div>
    <div class="empty"></div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div class="today">8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
    <div>26</div>
    <div>27</div>
    <div>28</div>
    <div>29</div>
    <div>30</div> 
  </div>
</div>

问题解答 #

问题1：为何.days选择器中的calc()函数使用百分比时无法正常工作？

你写的calc((40% - .4rem) / 7)里的40%是相对于父元素.calendar的宽度，但.days自身设置了padding-inline: .2rem，它的可用宽度其实是.calendar的40%减去左右padding总和（0.4rem）。现在直接拿.calendar的40%来计算，相当于给每个日期块的宽度设成了父容器宽度的40%除以7，这个值要么远小于.days的可用空间，要么在容器缩放时，因为百分比的计算基准是父容器而非当前元素的可用空间，导致7个日期块总宽度匹配出错，出现换行、错位等问题，自然没法正常排成一行。

问题2：将百分比改为rem单位后布局能完美适配，其原因是什么？

rem是基于根元素字体大小的固定长度单位（默认1rem=16px），把40%换成具体的rem值后，calc(([设定的rem值] - .4rem)/7)能精准计算每个日期块的宽度：用.days的总宽度（你设定的rem值）减去左右padding的0.4rem，再平均分成7份，刚好填满.days的可用空间。配合flex-wrap: wrap，每7个块会自动排成一行，不会出现计算基准混乱的问题，布局也就完美适配了。

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