Css 滚动包含溢出内容的flexbox_Css_Layout_Multiple Columns_Flexbox

Css 滚动包含溢出内容的flexbox

css layout

Css 滚动包含溢出内容的flexbox,css,layout,multiple-columns,flexbox,Css,Layout,Multiple Columns,Flexbox,我正在使用以实现上述布局： .header{ 高度：50px； } .身体{ 位置：绝对位置；顶部：50px；右：0；底部：0；左：0；显示器：flex； } .侧边栏{ 宽度：140px； } 梅因先生{ 弹性：1；显示器：flex；弯曲方向：立柱； } .内容{ 弹性：1；显示器：flex； } .栏目{ 填充：20px；右边框：1px实心#999； } 主标题边栏页眉。内容列如下。第1栏第1栏第1栏添加以下内容： align-items: flex-star

我正在使用以实现上述布局：

.header{
高度：50px；
}
.身体{
位置：绝对位置；
顶部：50px；
右：0；
底部：0；
左：0；
显示器：flex；
}
.侧边栏{
宽度：140px；
}
梅因先生{
弹性：1；
显示器：flex；
弯曲方向：立柱；
}
.内容{
弹性：1；
显示器：flex；
}
.栏目{
填充：20px；
右边框：1px实心#999；
}

主标题
边栏
页眉。内容列如下。
第1栏
第1栏
第1栏

添加以下内容：

align-items: flex-start;

到

.content{}

的规则。至少在Firefox和Chrome中，我可以在你的笔下修复它

默认情况下，

.content

具有

align items:stretch

，这使其所有自动高度子项的大小都与自身的高度相匹配。相比之下，flex start的值

flex start

允许孩子们计算自己的高度，并在起始边缘对齐（溢出，并触发滚动条）。

我已经和（flexbox规范的作者）谈过这一点，这就是我们想到的：

HTML:


第1栏
第2栏
第3栏

CSS:

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

这些是钢笔：

之所以这样做是因为

align items:stretch

在项目具有固有高度时不会收缩其项目，这是通过稍微晚一点

min content

实现的，但这可能有助于：

基本上你需要把

html

，

body

放到

高度：100%

并将所有内容包装到

CSS:

为我工作。希望能有所帮助

经过多次尝试和错误，我刚刚非常优雅地解决了这个问题

查看我的博客帖子：

基本上，要使flexbox单元格可滚动，必须使其所有父级

溢出：隐藏

，否则它将忽略溢出设置，而使父对象变大。

使用

位置：绝对与flex一起使用

：使用

Position:relative

定位弹性项目。然后在其中添加另一个

元素，其中包含：

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

这会将元素扩展到其相对定位父元素的边界，但不允许扩展它。内部，

溢出：自动将按预期工作

答案中包含的代码段-单击，然后在运行代码段或后单击

点击查看
结果是：


.all-0{
排名：0；
底部：0；
左：0；
右：0；
}
p{
文本对齐：对齐；
}
.bottom-0{
底部：0；
}
.自动溢出{
溢出：自动；
}

标题1

与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一篇古典拉丁文学作品，距今已有2000多年的历史。。。
标题1

与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一篇古典拉丁文学作品，距今已有2000多年的历史。。。
标题1

与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一篇古典拉丁文学作品，距今已有2000多年的历史。。。
标题1

与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一篇古典拉丁文学作品，距今已有2000多年的历史。。。
标题1

与流行的观点相反，Lorem Ipsum不是简单的随机文本。它起源于公元前45年的一篇古典拉丁文学作品，距今已有2000多年的历史。。。
社会侧边栏。。。


顶级糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力条。熊爪冰淇淋巧克力条甜甜圈馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。哈尔瓦水果蛋糕冰淇淋巧克力。熊爪冰淇淋巧克力条甜甜圈馅饼。
糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力条甜甜圈馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。哈尔瓦水果蛋糕冰淇淋巧克力。熊爪冰淇淋巧克力条甜甜圈馅饼。
糖果提拉米苏蛋奶酥水果蛋糕冰淇淋巧克力棒。熊爪冰淇淋巧克力条甜甜圈馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。哈尔瓦水果蛋糕冰淇淋巧克力。熊爪冰淇淋巧克力条甜甜圈馅饼。
布丁纸杯蛋糕丹麦苹果派苹果派。Halvafruitcae冰淇淋巧克力。熊爪冰淇淋巧克力条甜甜圈馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。Halvafruitcae冰淇淋巧克力。熊爪冰淇淋
巧克力甜甜圈馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。Halvafruitcae冰淇淋巧克力。熊爪冰淇淋巧克力条甜甜圈馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。Halvafruitcae冰淇淋巧克力
酒吧。熊爪冰淇淋巧克力条甜甜圈馅饼。布丁纸杯蛋糕丹麦苹果派苹果派。哈尔瓦
我遇到的一个问题
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        overflow-y: hidden;
        overflow-x: hidden;
        color: white;
    }

    .base-container {
        display: flex;
        flex: 1;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        align-items: stretch;
    }

    .title {
        flex: 0 0 50px;
        color: black;
    }

    .container {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

        .container .header {
            flex: 0 0 50px;
            background-color: red;
        }

        .container .body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: row;
        }

            .container .body .left {
                display: flex;
                flex-direction: column;
                flex: 0 0 80px;
                background-color: blue;
            }
                .container .body .left .content,
                .container .body .main .content,
                .container .body .right .content {
                    flex: 1 1 auto;
                    overflow-y: auto;
                    height: 100px;
                }
                .container .body .main .content.noscrollbar {
                    overflow-y: hidden;
                }

            .container .body .main {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                background-color: green;
            }

            .container .body .right {
                display: flex;
                flex-direction: column;
                flex: 0 0 300px;
                background-color: yellow;
                color: black;
            }

    .test {
        margin: 5px 5px;
        border: 1px solid white;
        height: calc(100% - 10px);
    }
</style>

<div class="base-container">
    <div class="title">
        Title
    </div>
    <div class="container">
        <div class="header">
            Header
        </div>
        <div class="body">
            <div class="left">
                <div class="content">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>12</li>
                        <li>13</li>
                        <li>14</li>
                        <li>15</li>
                        <li>16</li>
                        <li>17</li>
                        <li>18</li>
                        <li>19</li>
                        <li>20</li>
                        <li>21</li>
                        <li>22</li>
                        <li>23</li>
                        <li>24</li>
                    </ul>
                </div>
            </div>
            <div class="main">
                <div class="content noscrollbar">
                    <div class="test">Test</div>
                </div>
            </div>
            <div class="right">
                <div class="content">
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>Right</div>
                    <div>End</div>
                </div>
            </div>
        </div>
    </div>
</div>