使CSS最大宽度大于父级

Question

https://jsfiddle.net/d3yns9b6/演示了如何max-width将其设置为大于包含元素的内容时不起作用。

由于它的位置绝对正确，因此它应该可以延伸到包含元素之外。如果我使用width它设置一个精确值，但是示例中的两段文本都恰好就是该宽度。

我希望它们都占用尽可能少的宽度，最多达到我设置的最大数量（即使它超过了父容器）。

.out {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: blue;
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}

<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
  </div>
  <div class="in" style="margin-top:300px">
    Lorem
  </div>
</div>

Answer 1

您需要使用 设置宽度并width使用 约束它max-width。

像这样的东西：

.in {
  position: absolute;
  width: 100vw;
  max-width: 600px;
  background-color: yellow;
}