Question

在this回答之后，我正在尝试为我的内容创建一个完美的高度，但内容高度溢出而不是滚动内容。我为这个场景创造了一个小提琴。请帮助我修改我的内容高度，以便最重要的内容，并始终可见并向下滚动。

html,
body {
    height: 100%;
    margin: 0
}

.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.box .row {
    border: 1px dotted grey;
}

.box .row.header {
    flex: 0 1 auto;
}

.box .row.content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
    justify-content: center;
    align-items: center;
}

.data {
    width: 80%;
    min-height: 400px;
}

.box .row.footer {
    flex: 0 1 40px;
}

HTML

<head>
    <link href="./test.css" rel="stylesheet">
</head>

<body>
    <div class="box">
        <div class="row header">
            <p>
                <b>header</b>
                <br />
                <br />(sized to content)</p>
        </div>
        <div class="row content">
            <div class="data">
                invisible box1
            </div>
            <div class="data">
                visible box2
            </div>
            <div class="data">
                visible box3
            </div>
            <p>
                <b>Bottom Box is visible with scroll.</b> (fills remaining space)
            </p>
        </div>
        <div class="row footer">
            <p>
                <b>footer</b> (fixed height)</p>
        </div>
    </div>
</body>

</html>

Answer 1

您遇到的问题是由justify-content: center规则中的.box .row.content引起的。

删除它，你的文字会正常溢出。

.box .row.content {
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    overflow-y: auto;
    /*justify-content: center;              removed  */
    align-items: center;
}

Updated fiddle

这是justify-content: center的默认行为，其中，在Flex列容器上，当内容溢出时，它将在其顶部和底部溢出。

在这里阅读更多资源，找到资源和解决方法：

How to use safe center with flexbox?

Answer 2

我认为overflow: scroll;会解决您的问题。

如何使用flex css

2 个答案: