import React from 'react'

import { TabPane, Tabs, Divider } from 'react-icecream'

export default function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '300px' }}>
      <div style={{ height: '100px', border: '1px solid black' }}>I have 100px height.</div>
      <Tabs defaultValue="1" style={{ flex: 1, overflow: 'auto' }}>
        <TabPane name="选项一" value="1" style={{ color: '#fff', background: '#333' }}>
          TabPane has me scroll, as i overflowed.
          <Divider />
          content
          <Divider />
          content
          <Divider />
          content
          <Divider />
        </TabPane>
        <TabPane name="选项二" value="2" style={{ color: '#fff', background: '#333' }}>
          second
        </TabPane>
        <TabPane name="选项三" value="3" style={{ color: '#fff', background: '#333' }}>
          third
        </TabPane>
      </Tabs>
    </div>
  )
}