Drake Xiang Drake Xiang - 3 years ago 145
CSS Question

How to stretch parent element width in layout with ant-design

Demo here.

<div style={{width: 2000, background: 'red'}}>content</div>


The parent div is not affected by the child width, maybe because it's flex? Then how should I set the parent width according to its child's width?

Answer Source

You can set align-items: flex-start to the parent container (the default value stretch causes the Content width to be restricted):

<Layout className="layout" style={{ padding: '0 24px 24px' }}>
    <Breadcrumb style={{ margin: '12px 0' }}>
      <Breadcrumb.Item>Home</Breadcrumb.Item>
      <Breadcrumb.Item>List</Breadcrumb.Item>
      <Breadcrumb.Item>App</Breadcrumb.Item>
    </Breadcrumb>
    <Content style={{background: '#fff', padding: 24, margin: 0, minHeight: 280}}>
      <div style={{width: 2000, background: 'red'}}>content</div>
    </Content>
</Layout>

with style:

.layout {
  align-items: flex-start;
}

See updated codepen.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download