CSS Flexbox 位置 :absolute Container doesn't show all Elements

Question

大家好

我关于 SO 的第一个问题，所以请善待 :)

当需要 overflow-y 时，我遇到了 flexbox 容器及其子容器的问题。因此，如果您更改垂直滚动所需的容器宽度，则并非所有元素都可见，您无法向上滚动。

这是代码笔:Codepen

html:

<div id="dailyplan-header">
  <button type="buttton">someButton</button>
  <button type="buttton">someButton2</button>
  <button type="buttton">someButton3</button>
</div>
<div id="dailyplan-container">
  <div class="dailyplan">Parent Name0
    <div>Some Element0</div>
    <div>Some Element1</div>
    <div>Some Element2</div>
    <div>Some Element3</div>
  </div>
  <div class="dailyplan">Parent Name1
    <div>Some Element0</div>
    <div>Some Element1</div>
    <div>Some Element2</div>
    <div>Some Element3</div>
    <div>Some Element4</div>
  </div>
  <div class="dailyplan">Parent Name2
    <div>Some Element0</div>
  </div>
  <div class="dailyplan">Parent Name3
    <div>Some Element0</div>
    <div>Some Element1</div>
  </div>
  <div class="dailyplan">Parent Name4
    <div>Some Element0</div>
    <div>Some Element1</div>
    <div>Some Element2</div>
    <div>Some Element3</div>
  </div>
  <div class="dailyplan">Parent Name5
    <div>Some Element0</div>
    <div>Some Element1</div>
  </div>
  <div class="dailyplan">Parent Name6
    <div>Some Element0</div>
  </div>
  <div class="dailyplan">Parent Name7
    <div>Some Element0</div>
    <div>Some Element1</div>
    <div>Some Element2</div>
  </div>
</div>

CSS:

body {
  background-color:#fff;
}

#dailyplan-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50px;
  box-sizing: border-box;
  border-bottom: 2px solid #f0ad4e;
}

#dailyplan-container {
  position:absolute;
  box-sizing: border-box;
  top:50px;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-around;
  align-content: center;
  overflow-y: scroll;
}
.dailyplan {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: green;
  min-width:250px;
  padding:20px;
  margin:10px;
  border-radius: 7px 20px 7px 20px;
  -moz-border-radius: 7px 20px 7px 20px;
  -webkit-border-radius: 7px 20px 7px 20px;
  border: 0px solid #000000;
}

您可以看到，当将视口(viewport)缩小到较小的宽度(智能手机)时，并非所有子元素都不再可见。特别是在显示第一个 child 之前，您不能“向上”滚动。

当然，我尝试搜索解决方案，但要么我没有正确的搜索词，要么就是没有匹配的答案。任何改进此描述的提示，以及其他人可以找到的更好的提示，当然都会受到赞赏。

Answer 1

您需要为 flex 正确设置位置。

#dailyplan-container {
 position:relative;  /*--Set the position relative instead of Absolute--*/
 box-sizing: border-box;
 top:50px;
 left:0;
 right:0;
 bottom:0;
 display:flex;
 flex-wrap: wrap;
 align-items: stretch;
 justify-content: space-around;
 align-content: center;
 overflow-y: scroll;
 }

检查这个 fiddle Fiddle

如果您仍然有问题，请复出!