html - 即使内容溢出，垂直滚动条也不会出现在 div 上？

Question

.calHeadDay,
.calBodyDay {
  width: calc((100% - 60px)/7);
  display: table-cell;
  box-sizing: border-box;
  border: 1px solid #4567b1;
  color: #4567b1;
}

.calHeadTime,
.calBodyTime {
  width: 60px;
  display: table-cell;
  box-sizing: border-box;
}

.calHeadDay {
  background-color: #eaf2f5;
  text-align: center;
  vertical-align: bottom;
  padding: 3px;
}

.calHeader,
.calBody {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.calBody {
  max-height: 500px;
  overflow-y: scroll;
}

.calTimeBlock {
  border: 1px solid #d5d8dd;
  border-right: none;
  box-sizing: border-box;
  text-align: right;
  color: #556;
  padding: 2px;
  width: 100%;
  height: 50px;
}

.calTimeBlock+.calTimeBlock {
  border-top: none;
}


}

<div>
  <div class="calHeader">
    <div class="calHeadTime"></div>
    <div class="calHeadDay">
      <!-- react-text: 15 -->Sunday
      <!-- /react-text --><br>
      <!-- react-text: 17 -->Aug 13, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 19 -->Monday
      <!-- /react-text --><br>
      <!-- react-text: 21 -->Aug 14, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 23 -->Tuesday
      <!-- /react-text --><br>
      <!-- react-text: 25 -->Aug 15, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 27 -->Wednesday
      <!-- /react-text --><br>
      <!-- react-text: 29 -->Aug 16, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 31 -->Thursday
      <!-- /react-text --><br>
      <!-- react-text: 33 -->Aug 17, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 35 -->Friday
      <!-- /react-text --><br>
      <!-- react-text: 37 -->Aug 18, 2017
      <!-- /react-text -->
    </div>
    <div class="calHeadDay">
      <!-- react-text: 39 -->Saturday
      <!-- /react-text --><br>
      <!-- react-text: 41 -->Aug 19, 2017
      <!-- /react-text -->
    </div>
  </div>
  <div class="calBody">
    <div class="calBodyTime">
      <div class="calTimeBlock">7am</div>
      <div class="calTimeBlock">8am</div>
      <div class="calTimeBlock">9am</div>
      <div class="calTimeBlock">10am</div>
      <div class="calTimeBlock">11am</div>
      <div class="calTimeBlock">12pm</div>
      <div class="calTimeBlock">1pm</div>
      <div class="calTimeBlock">2pm</div>
      <div class="calTimeBlock">3pm</div>
      <div class="calTimeBlock">4pm</div>
      <div class="calTimeBlock">5pm</div>
      <div class="calTimeBlock">6pm</div>
    </div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
    <div class="calBodyDay"></div>
  </div>
</div>

我已经将.calBody的max-height设置为500px，但是内容占了600px。为什么没有出现滚动条？

Answer 1

你应该只修改下面的一些类:

.calHeader,
.calBody {
  /*display: table;*/
  display: flex;
  width: 100%;
  border-collapse: collapse;
}

但是页面右侧的滚动条导致列的标题和列的宽度不同。