Semantic UI scrollable Segment

Question

I´m using Semantic UI together with ReactJS using the official semantic-ui-react.

I want to build a Trello like app and put cards on it. The cards are going to be stacked for one Topic and shall be scrollable vertically inside one topic and horizontally on all topics.

I´m using the code below and naturally I´m getting stacked segments, with large width, and no scroll controls.

import React, { Component } from 'react';
import { Segment, Card, Header } from 'semantic-ui-react';


class TestPanel extends Component {

    getCards = () => {

        let i = 0;
        let cards = [];

        for (i = 0; i < 10; i++) {

            let card = (
                    <Card key={i}>
                        <Card.Header>
                            Item {i}
                        </Card.Header>
                        <Card.Meta>
                            ItemMeta {i}
                        </Card.Meta>
                    </Card>
                );
            cards.push(card);
        }

        return cards;
    };

    render () {

        let cards = this.getCards();

        return (
            <div>
                <Segment>
                    <Segment>
                        <Header>Segment 1</Header>
                        {cards}
                    </Segment>
                    <Segment>
                        <Header>Segment 2</Header>
                        {cards}
                    </Segment>
                </Segment>
            </div>
            );
    }

}

export default TestPanel;

I´ve checked segment and there is no scrollable option on any commands.

So, how can I make the outer segment to scroll horizontally and each card segment scroll vertically. Thanks for helping.

Answer 1

Try this, works for me:

  <Segment style={{overflow: 'auto', maxHeight: 200 }}>
  </Segment>

Answer 2

Since 3rd July 2017 (just after your question) there is a "scrolling content" style available. See closing note in https://github.com/Semantic-Org/Semantic-UI/issues/4335

Modal example:

<div class="ui modal">
  <div class="header">Header</div>
  <div class="scrolling content">
    <p>Very long content goes here</p>
  </div>
</div>