首页 文章

滚动带有溢出内容的Flexbox

提问于
浏览 次
138

enter image description here

Here's the code我正在使用以实现上述布局：

.header {
  height: 50px;
}

.body {
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

.sidebar {
  width: 140px;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
}

.column {
  padding: 20px;
  border-right: 1px solid #999;
}

<div class="header">Main header</div>
<div class="body">
  <div class="sidebar">Sidebar</div>

  <div class="main">
    <div class="page-header">Page Header. Content columns are below.</div>
    <div class="content">
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
      <div class="column">Column 1</div>
    </div>
  </div>
</div>

我省略了用于样式的代码 . 你可以在the pen中看到所有这些内容 .

上面的工作，但当 content 区域的内容溢出时，它会使整个页面滚动 . 我只希望内容区域本身滚动，所以I added overflow: auto to the content div .

现在的问题是列本身不会超出其父级高度，因此边界也被切断 .

Here's the pen showing the scrolling issue .

How can I set the content area to scroll independently, while still having its children extend beyond the content box's height?

css css3 layout multiple-columns flexbox

5 回答

  • 4

    我已经和Tab Atkins（flexbox规范的作者）谈过这个问题，这就是我们想出来的：

    HTML:

    <div class="content">
    <div class="box">
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
        <div class="column">Column 1</div>
    </div>
</div>

    CSS:

    .content {
    flex: 1;
    display: flex;
    overflow: auto;
}

.box {
    min-height: min-content; /* needs vendor prefixes */
    display: flex;
}

    这是钢笔：

    这样做的原因是因为 align-items: stretch 如果它们具有固有高度，则不收缩它的项目，这可以通过 min-content 来实现 .

    回复于
  • 53

    经过大量的试验和错误后，我才非常优雅地解决了这个问题 .

    看看我的博文：http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

    基本上，要使flexbox单元格可滚动，您必须将其所有父项设置为 overflow: hidden; ，否则它将忽略您的溢出设置并使父项更大 .

    回复于
  • 7

    有点晚了但这可能会有所帮助：http://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

    基本上你需要将 html ， body 放到 height: 100%; 并将所有内容包装成 <div class="wrap"> <!-- content --> </div>

    CSS：

    html, body {
  height: 100%;
}

.wrap {
  height: 100vh;
  display: flex;
}

    为我工作 . 希望能帮助到你

    回复于
  • 8

    使用职位：绝对;与flex一起：

    祝好运...

    回复于
  • 185

    添加这个：

    align-items: flex-start;

    .content {}的规则 . 至少（在Firefox和Chrome中），它为我修复了它 .

    默认情况下，.content具有"align-items: stretch"，这使得它根据http://dev.w3.org/csswg/css-flexbox/#algo-stretch确定其所有自动高度子项的大小以匹配其自己的高度 . 相反，值"flex-start"让孩子们计算他们自己的高度，并在起始边缘对齐自己（并且溢出，并触发滚动条） .

    回复于

相关问题