考虑以下示例。。。

null

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>

null

。。。我希望子级长到width:150%，并且在左右方向上（因为它是水平居中的）都比父级长得多。。。我希望子级长到width:150%。

为什么不这样呢？

注意:我对来自官方或可靠来源的答案感兴趣，最好是指出任何bug或说明行为和任何可能的变通方法。

调试信息:在最新的Chrome，Ubuntu17.10中体验这个。 还没有跨浏览器测试，会像我一样更新。