如何使用ant-design在布局中拉伸父元素宽度答案

【问题标题】：How to stretch parent element width in layout with ant-design如何使用ant-design在布局中拉伸父元素宽度
【发布时间】：2018-03-12 01:13:43
【问题描述】：

Demo 在这里。

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

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

【问题讨论】：

标签： html css reactjs flexbox antd

【解决方案1】：

您可以将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。

【讨论】：

感谢您的回答，我只是对这个问题摸不着头脑，我专注于我的内容的直接父级，没有意识到它的祖先可能是真正的原因..