html - 如何使用 Ant 设计拉伸(stretch)布局中的父元素宽度

Demo在这里。

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

父div不受子宽度的影响，也许是因为它是可弯曲的？那我应该如何根据孩子的宽度设置父母的宽度呢？

最佳答案

您可以将align-items: flex-start设置为父容器（默认值Stretch会限制Content宽度）：

<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>

风格：

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

请参见updated codepen。