Question

当在Flex框内时，如何将div设置为可滚动（绝对）而不固定高度填充整个视图？

（https://imgur.com/7v5OFas）（在右侧部分输入错字，固定宽度，唯一的高度是将所有内容都填满页面）

https://codepen.io/anon/pen/oJyOOp?editors=1000 （如果我在红色部分的相对父级中添加高度，它可以工作，但是我不能有固定的高度。从html向相对父级中添加100％也可以，但是我也不能这样做。）

目前进展情况：

<div style="display:flex">
    <div style="flex-grow:1">
        <div style="display:flex">
            <div style="width:45px...">
                ....
            </div>

            <div ...header code>
                ....
            </div>

            <div style="flex-grow:1; top:70px; position: relative">
                <div style="position: absolute; top:0; left:0; right:0; bottom: 0; overflow: auto>
                </div>
            </div>
        </div>
    </div>

   <div style="width:45px...">
       ....
   </div>
</div>

它最终填满了页眉高度。

Answer 1

如果绝对必要，我会放弃绝对内容的想法，然后尝试类似的东西：

html, body {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

.container{
  background: blue;
  display: flex;
  height: 100%;
  flex-flow: row;
}

.sidebar{
  background: red;
    height: 100%;
    width: 200px;
}

.contentWrapper{
  display: flex;
  flex-flow: column;
  flex: 1;
}
.header {
  background: yellow;
  height: 100px;
  width: 100%;
}
.content {
      flex: 1;
    overflow: auto;
}

.scrollableContent {
    height: 3000px;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="contentWrapper">
    <div class="header"></div>
    <div class="content">
      <div class="scrollableContent">
        
      </div>
    </div>
  </div>
</div>

在基本上使每个容器都具有弹性的情况下，其内容的不可扩展部分将具有固定的宽度/高度，而另一部分将获得flex: 1，这是占用其余空间的简写。

没有固定高度的flex容器内的绝对可滚动div，可以吗？

1 个答案: