滚动内容溢出的 flexbox [英] Scrolling a flexbox with overflowing content

查看：18
本文介绍了滚动内容溢出的 flexbox的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是代码我用来实现上述布局:

.header {高度:50px；}.身体 {位置:绝对；顶部:50px；右:0；底部:0；左:0；显示:弹性；}.侧边栏{宽度:140px；}.主要的 {弹性:1；显示:弹性；弹性方向:列；}.内容 {弹性:1；显示:弹性；}.柱子 {填充:20px；右边框:1px 实心 #999；}

主标题
<div class="body"><div class="sidebar">Sidebar</div><div class="main"><div class="page-header">页眉.内容列如下.

<div class="内容"><div class="column">第 1 列</div><div class="column">第 1 列</div><div class="column">第 1 列</div>

我省略了用于样式的代码.您可以在笔中查看所有内容.

<小时>

以上是有效的，但是当content区域的内容溢出时，它会使整个页面滚动.我只希望内容区域本身滚动，因此 我将 overflow: auto 添加到content div.

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

这是显示滚动问题的笔.

如何将 content 区域设置为独立滚动，同时仍使其子项超出 content 框的高度?

解决方案

我已经和 Tab Atkins 谈过了

a>(flexbox 规范的作者)关于这个，这就是我们想出的:

HTML:

<div class="box"><div class="column">第 1 列</div><div class="column">第 2 列</div><div class="column">第 3 列</div>

CSS:

.content {弹性:1；显示:弹性；溢出:自动；}.盒子 {显示:弹性；最小高度:最小内容；/* 需要供应商前缀 */}

这是笔:

  1. 被拉伸的短列.
  2. 更长的列溢出和滚动.

这样做的原因是因为 align-items:stretch 不会收缩它的项目，如果它们有一个固有的高度，这是由 min-content 在这里完成的.

Here's the code I'm using to achieve the above layout:

.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>

I omitted the code used for styling. You can see all of it in the pen.

The above works, but when the content area's content overflows, it makes the whole page scroll. I only want the content area itself to scroll, so I added overflow: auto to the content div.

The problem with this now is that the columns themselves don't extend beyond their parents height, so the borders are cut off there too.

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?

解决方案

I've spoken to Tab Atkins (author of the flexbox spec) about this, and this is what we came up with:

HTML:

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

CSS:

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

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

Here are the pens:

  1. Short columns being stretched.
  2. Longer columns overflowing and scrolling.

The reason this works is because align-items: stretch doesn't shrink its items if they have an intrinsic height, which is accomplished here by min-content.

这篇关于滚动内容溢出的 flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆