Search code examples
javascripthtmlcssreactjsantd

Big Typography in ant design makes other blocks ignore span

I want to make a grid with ant design with span 18, for that I make this code

<Row>
<Col span={18}>
    <Row>
        <Col span={24}>
            <Button/>
        </Col>
        <Col span={24}>
            <Typography>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkklllllllllllllllllllllllloooooooo</Typography>
        </Col>
    </Row>
</Col>

if the length of Typography exceeds the length of the block, it starts to stretch instead of wrapping

I tried to set width for typography, its not working (text being wrapped, but buttons still stretch)

tried to change typography span, its not working (text being wrapped, but buttons still stretch)

Solution

  • I figured it out. Turns out the problem was that I had a lot of flex in each other, so when the text got big, it caused the parent flex to expand and so on. I solved this problem by limiting the flex size to max width: min-content, now it is no bigger than a button. Thanks for the response, guys –