How to add a scroll bar to a component in React? - css

Question

I'm using a grid system with 3 columns in my SPA. The left and right list contain components that occupy 100 of the viewport height. The middle column contains a long list and would like to add a scrollbar just to the middle component. I've tried to wraw the middle component with several different scrollbar components but nothing works. I end up always with a main page scroll which leaves me only with the list component when scroll further down and left and right component are remaining remain to the top of the page.

Answer 1

Try adding overflow-y: scroll; on the middle component
const items = [...Array(100)].map((val, i) => `Item ${i}`);
const App = () => (
<div className="container">
<div className="left-col">
Left col
</div>
<div className="center-col">
<span>List</span>
<ul>
{items.map((item, i) => (<li key={`item_${i}`}>{ item }</li>))}
</ul>
</div>
<div className="right-col">
Right col
</div>
</div>
);
ReactDOM.render(<App />, document.getElementById('react'));
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.left-col {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: #ddd;
}
.center-col {
flex: 1;
background: #aaa;
overflow-y: scroll;
}
.right-col {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: #e7e7e7;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>

Answer 2

Found the solution, need to set fixed height to left and right component and overflow:scroll to middle component.