react组件中如何使用antd分隔线来分隔屏幕的两侧？

Question

I am using antd and would like the vertical divider to split the two sides of my screen. The two sides are in fact separated by different Col components. They currently look something like this:

 class Example extends React.Component {
   render () {
     return (
      <Row>
        <Col span={11}>
          CONTENT ONE SIDE
        </Col>
        <Col span={2}>
          <Divider type='vertical'/>
        </Col>
        <Col span={11}>
          CONTENT OTHER SIDE
        </Col>
      </Row>
     )
   }
 }

The issue here is that the Divider is barely appearing. I would like it to go all the way down where the content ends. Instead, it is just a tiny little line.

This is a screenshot of what it currently looks like:

You can barely see the divider in the middle.

How can I make the vertical divider be as long as the content?

Thanks!

Answer 1

您可以将分隔线的height设置为100% ，请参阅此沙箱

    <Divider type="vertical" style={{ height: "100%" }} />

Answer 2

Mine doesn't work with the above answers. After a little bit of work. I finally got this below code to work.

< Divider
   type="vertical"      style={{ height: "100px", backgroundColor: "#000" }}
/>

Answer 3

height 100%

    <Row>
      <Col span={11}>
        CONTENT ONE SIDE
        <br />
        CONTENT ONE SIDE
        <br />
        CONTENT ONE SIDE
        <br />
      </Col>
      <Col span={2}>
        <Divider type="vertical" style={{ height: "100%" }} />
      </Col>
      <Col span={11}>CONTENT OTHER SIDE</Col>
    </Row>

https://codesandbox.io/s/antd-create-react-app-forked-rzp10?file=/index.js:181-499