语义UI可滚动段

Question

我使用语义UI和ReactJS一起使用官方语义UI反应。

我想构建一个类似Trello的应用程序并在其上放置卡片。这些卡片将被堆叠用于一个主题，并且可以在一个主题内垂直滚动并且在所有主题上水平地滚动。

我使用下面的代码，自然我得到堆叠段，宽度大，没有滚动控件。

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>