Question

考虑以下示例...

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

......我希望孩子长大到width:150%，并且在左右方向上都会超过它的父母（因为它水平居中）。

为什么不发生这种情况？

注意：我对从官方或可靠来源获取的答案感兴趣，最好精确定位任何提及行为和任何可能的解决方法的错误或规范。

调试信息：在最新的Chrome，Ubuntu 17.10中体验这一点。 Haven尚未经过跨浏览器测试，将像我一样更新。

Answer 1

您需要考虑flex-shrink。正如您可以阅读here：

flex-shrink CSS属性指定a的flex缩减系数弹性项目。 Flex项目将缩小以填充容器 弹性收缩数，当弹性项目的默认大小时 比弹性容器。

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

我们可以阅读here also：

flex-shrink属性指定 flex shrink factor ，其中   确定弹性项目相对于其余缩小的程度   负空闲空间^（1） 时，Flex容器中的弹性项   的分布式

此属性处理浏览器计算的情况   弹性项目的弹性基础值，发现它们太大   适合Flex容器。只要flex-shrink 具有正面   值会缩小，以便不会溢出   容器

因此，通过将flex-shrink设置为0，元素将永远不会缩小，因此您允许溢出（默认情况下，该值设置为1）。

^{（1）负空间：当物品的自然尺寸加起来比flex中的大于可用空间时，我们有负的可用空间容器}

为什么flex-child限于父母大小？

1 个答案: