セマンティックUIのスクロール可能なセグメント

Question

私はセマンティックUIを、ReactJSとともに公式のsemantic-ui-reactを使用して使用しています。

私は、Trelloのようなアプリを作成してカードを貼りたいと思っています。カードは1つのトピックに対して積み重ねられ、1つのトピック内で垂直方向にスクロール可能で、すべてのトピックでは水平方向にスクロール可能です。

私は以下のコードを使用していますが、自然にスクロールコントロールのない幅の広いセグメントが積まれています。

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; 

セグメントを確認しましたが、コマンドにはscrollableオプションがありません。

どのようにして外側のセグメントを水平にスクロールさせ、各カードセグメントを垂直にスクロールさせることができますか？助けてくれてありがとう。

Answer 1

私の作品、これを試してみてください：

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