Question

嘿大家

关于SO的第一个问题，请善待：）

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

以下是codePen：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;
}

你可以看到，当将视口缩小到一个小宽度（智能手机）时，并不是所有的子元素都可见。特别是在显示第一个孩子之前，你不能向上滚动。

当然我试图搜索解决方案，但要么我没有正确的搜索条件，要么就是没有匹配的答案。任何改进这种描述的提示，其他人都可以找到更好的提示，当然是值得赞赏的。

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

如果你还有问题，请复出。！

Answer 2

好的，对于答案而言，来自CodeRomeos的提示解决了它，虽然之前使用了不同的方法获得了所需的行为，但我认为这很好：）

#dailyplan-header {
  position:fixed;/*<-- changed from absolute to fixed */
  top:0;
  left:0;
  right:0;
  height:50px;
  box-sizing: border-box;
  border-bottom: 2px solid #f0ad4e;
  z-index:2; /*<-- now needed. */
}
#dailyplan-container {
  position:relative /*<-- changed as suggested. */
  height: 100%; /*<-- now needed. */
  ...
}

对于令人难以置信的快速帮助而言：）

Answer 3

如果您想在容器上保留position: absolute，还可以在dailyplan元素周围添加额外的包装。

像

这样的东西

<div id="dailyplan-container">
  <div class="dailyplan-wrapper">
    <div class="dailyplan">
      ...
    </div>
  </div>
</div>

然后为此元素赋予flexbox布局而不是#dailyplan-container元素。

Codepen： http://codepen.io/grrtbrtr/pen/QjozrL

CSS Flexbox position：absolute Container不显示所有Elements

3 个答案: