React 和 Bulma：如何使用 css 使列垂直滚动？

Question

使用 React 和 Bulma columns，如何使用 css 使列垂直滚动（溢出-y）？

在下面提供的代码中，由于 Filters 组件，我只是获取了第一列中显示的一堆过滤器。然后我想使用 DocumentListView 组件显示文档列表。这发生在第二列中。

请注意，我在第二列中添加了 scrollable class 以使该列可垂直滚动。

import React from 'react'
import Filters from './components/Filters/Filters'
import DocumentListView from './components/DocumentListView/DocumentListView'
import { fetchFilters } from './_actions'
import { connect } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'

import './App.css'


class App extends React.Component {
    componentDidMount() {
        this.props.fetchFilters()
    }

    render() {
        return (
            <BrowserRouter>
                <div className='App'>
                    <div className='columns'>
                        <div className='column is-one-fifth'>
                            <Filters />
                        </div>
                        <div className='column scrollable'>
                            {/* This column should be vertically scrollable */}
                            <DocumentListView />
                        </div>
                        <div className='column'></div>
                    </div>
                </div>
            </BrowserRouter>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetchFilters: () => dispatch(fetchFilters()),
    }
}

export default connect(null, mapDispatchToProps)(App)

这是我正在使用的 App.css 文件：

html,
body {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    background-color: lightgray;
    overflow: hidden;
}

.App {
    width: 100%;
    height: 100%;
    padding: 2%;
}

.columns {
    height: 100%;
}

.scrollable {
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

感谢您的帮助。

Answer 1

将最大高度添加到列 class。像这样：-

.columns{
max-height: 200px;
}

如果你想让你的中心 div 的高度依赖于它的兄弟姐妹，那么这样做：-

.scrollable{
   height: 100%;
   position: relative;
}

.scrollable>div{
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   overflow-y: auto
}

希望有用

React 和 Bulma：如何使用 css 使列垂直滚动？

React and Bulma: How to make column vertically scrollable using css?

css

reactjs

bulma