在Flex内部使用溢出

时间:2014-04-09 16:35:31

标签: css css3 flexbox

我正在玩flex,但我遇到了一个问题。我有我的身体,我使用flex来跨越嚎叫高度,到目前为止没有问题。

但我在我的div元素中有一个可以变得非常大的表。我想只在该div上应用溢出。但我没有成功。

如果你将屏幕缩小,滚动条会在页面级别上显示,我希望它只显示在表格级别上。

我在flex的第二级做错了我认为:

html, body {
height: 100%;
margin: 0;
background-color: grey;
}
.workspace {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    .begin {
        flex-wrap: nowrap;
        flex: 1 0 auto;
        background-color: blue;
    }
    .end {
        flex: 0 1 auto;
        background-color: green;
        padding: 5px;
        align-self: flex-end;
        > button {
            height: 64px;
            width: 64px;
        }
    }
}
.beginBlock {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
}
.result {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

请检查以下测试: http://jsfiddle.net/jansor/VWuCE/

0 个答案:

没有答案