考虑以下示例...
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
min-height: 100vh;
width: 50vw;
margin: 0 auto;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
border: 1px solid blue;
width: 150%;
}
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
</div>
</div>
……我期待着孩子长大width:150%并在左右方向上超出其父级（因为它水平居中）。
为什么这不会发生？
Note:我对来自官方或可靠来源的答案感兴趣，最好能查明提及该行为的任何错误或规范以及任何可能的解决方法。
调试信息：在最新的 Chrome、Ubuntu 17.10 中体验这一点。尚未测试跨浏览器，将像我一样更新。
你需要考虑flex-shrink。正如你所读到的here https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink:
CSS 的 flex-shrink 属性指定了一个元素的 Flex 收缩系数。
弹性项目。弹性项目会收缩以填充容器根据
弯曲收缩数，当Flex 项目的默认尺寸较大
比弹性容器.
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
min-height: 100vh;
width: 50vw;
margin: 0 auto;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
border: 1px solid blue;
width: 150%;
flex-shrink: 0; /* added this */
}
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
</div>
</div>
正如我们所读到的这里也是 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax:
The flex-shrink property specifies the flex shrink factor, which
determines how much the flex item will shrink relative to the rest of
the flex items in the flex container when negative free space(1) is
distributed.
该属性处理浏览器计算的情况
弹性项目的弹性基础值，并发现它们太大了
适合弹性容器。只要flex-shrink有积极的
物品价值会缩水为了让他们不要溢出这
容器。
所以通过设置flex-shrink to 0元素永远不会缩小，因此您允许溢出（默认情况下该值设置为1).
(1) Negative free space: We have negative free space when the natural size of the items adds up to larger than the available space in the flex container.
值得注意的是设定min-width: 150%由于另一个 Flexbox 功能不允许 Flex 项目收缩超过其最小宽度（显式定义或内在定义），也会给出预期结果
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
min-height: 100vh;
width: 50vw;
margin: 0 auto;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
border: 1px solid blue;
min-width: 150%;
}
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
</div>
</div>
有关的：为什么弹性项目不会缩小到超过内容大小？ https://stackoverflow.com/q/36247140/8620333
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
