Flexbox 滚动父级，子级 100% 高度 [重复]答案

【问题标题】：Flexbox Scrolling Parent, Children 100% Height [duplicate]Flexbox 滚动父级，子级 100% 高度 [重复]
【发布时间】：2018-02-07 06:18:51
【问题描述】：

我正在开发一个包含自定义日历的应用程序。日历采用 Flexbox 样式（所有建筑/日期逻辑都由 React 处理）。

日历运行良好，但我遇到了样式问题，不知道如何解决。

如果在某一周添加了很多事件，我希望将 week div 设置为 overflow: auto;（显示滚动条），以便您查看所有事件。

我遇到的问题是day div 的高度问题。我在父级 (week div) 上没有固定高度，因为我使用带有 flex: 1; 的 flexbox 来填充空间。如何让子 (day div) 使用溢出父 (week div) 的整个高度？

我希望有一个仅适用于跨浏览器的 CSS 解决方案。

此处的示例 CodePen： https://codepen.io/anon/pen/jLQyxX?editors=0100

HTML：

<div class="calendar">
  <div class="week">
    <div class="day">6</div>
    <div class="day">7</div>
    <div class="day">8</div>
    <div class="day">
      <div>This</div>
      <div>Border</div>
      <div>Doesn't</div>
      <div>Scale</div>
      <div>Correctly</div>
      <div>(Scroll Down)</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
    </div>
    <div class="day">10</div> 
  </div>
</div>

CSS：

body {
  display: flex;
  flex: 1;
  padding: 0;
  margin: 0;
  height: 100vh;
}

.calendar {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid black;
  border-bottom: none;
  margin: 15px;
}

.week {
  display: flex;
  flex: 1;
  overflow: auto;
  border-bottom: 1px solid black;
}

.day {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  outline: 1px dotted red;
}

【问题讨论】：

是否可以在day 元素中放置滚动条？
替代方案是通过使用 CSS 背景渐变来伪造 day 元素的边框，并完全删除它们的轮廓。这是阻止day 元素看起来像全高的唯一方法。
@Adam 在遇到我发布的问题时，我最初确实尝试过。不幸的是，它不适用于我的情况，因为事件可能会持续几天（类似于 FullCalendar fullcalendar.io）
@Michael_B 感谢分享链接——我原以为没有简单的 CSS 解决方案——除了一些创造性的“黑客”来获得所需的外观。我在网上为这个问题做了很多搜索，但那个链接从来没有出现过。

标签： html css flexbox

【解决方案1】：

一种可能的解决方案是在 week 和 day 之间添加一个包装器 wrap
_{这适用于 Chrome/Firefox/Edge，但 IE 有一些我正在调查的问题，并且没有 Safari 来测试它。}

Updated codepen

堆栈sn-p

body {
  padding: 0;
  margin: 0;
  display: flex;
}

.calendar {
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  border-bottom: none;
  margin: 15px;
  height: calc(100vh - 30px);
  display: flex;
  flex-direction: column;
}

.week {
  flex: 1;
  min-height: 20%;
  overflow: auto;
  border-bottom: 1px solid black;
  box-sizing: border-box;
}

.week .wrap {
  display: flex;
  min-height: 100%;
}

.day {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  outline: 1px dotted red;
}

.week:nth-child(even) .day {
  background: lightgray
}

<div class="calendar">
  <div class="week">
    <div class="wrap">
    <div class="day">1</div>
    <div class="day">2</div>
    <div class="day">3</div>
    <div class="day">4</div>
    <div class="day">5</div> 
      </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">6</div>
    <div class="day">7</div>
    <div class="day">8</div>
    <div class="day">
      <div>9</div>
      <div>&nbsp;</div>
      <div>This</div>
      <div>Border</div>
      <div>Doesn't</div>
      <div>Scale</div>
      <div>Correctly</div>
      <div>(Scroll Down)</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
    </div>
    <div class="day">10</div> 
    </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">11</div>
    <div class="day">12</div>
    <div class="day">13</div>
    <div class="day">14</div>
    <div class="day">15</div> 
  </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">16</div>
    <div class="day">17</div>
    <div class="day">18</div>
    <div class="day">19</div>
    <div class="day">20</div> 
  </div>
  </div>
  <div class="week">
    <div class="wrap">
    <div class="day">21</div>
    <div class="day">22</div>
    <div class="day">23</div>
    <div class="day">24</div>
    <div class="day">25</div> 
  </div>
  </div>
</div>

由于您的主网格每天保持相同大小（使用flex: 1 填充剩余空间），另一种选择是对week 和day 使用绝对定位，并且然后让day 成为一个弹性容器来处理它的内容。

【讨论】：

这非常适合我的用例 - 谢谢。我确实测试了 Safari，发现它运行不佳，但它是在旧版本上，而且我没有更新的 Mac 可以轻松测试。幸运的是，这是一个内部应用程序，我们没有任何 Safari 用户。

【解决方案2】：

最好的方法是将overflow: auto从.week移动到.day

【讨论】：