Question

我正在处理包含自定义日历的应用程序。日历使用Flexbox设置样式（所有构建/日期逻辑都使用React处理）。

日历运行良好，但我有一个样式问题，我不知道如何解决。

如果在特定的一周内添加了大量活动，我希望将week div添加到overflow: auto;（显示滚动条），以便您可以查看所有活动。

我遇到的问题是day div上的高度问题。我在父（week div）上没有固定的高度，因为我使用带有flex: 1;的flexbox来填充空间。如何让孩子（day divs）使用溢出父（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;
}

Answer 1

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

Updated codepen

Stack snippet

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和{的绝对定位{1}}，然后使day成为灵活容器来处理其内容。

Answer 2

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

Flexbox滚动父母，儿童100％高度

2 个答案: