html - 使 CSS 最大宽度大于父级

Question

https://jsfiddle.net/d3yns9b6/展示了当我想将它设置为大于包含元素的值时 max-width 是如何不起作用的。

因为它是绝对定位的，所以它应该能够延伸到包含元素之外。如果我使用 width 设置一个确切的值，它会起作用，但示例中的两段文本都恰好是那个宽度。

我希望它们都占用尽可能少所需的宽度，最大我设置的宽度(即使超过 strong> 父容器)。

.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 时，它将回退到 auto，这意味着它将使用父元素给定的宽度，而不管绝对定位或任何最大宽度。因此，您需要指定任何宽度，使用百分比或相对单位，例如vh 或vw。

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

.in {
  position: absolute;
  width: 500%;
  max-width: 600px;
}

.in > span {
  background-color: yellow;
  display: inline-block;
}

<div class="out">
  <div class="in">
    <span>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.</span>
  </div>
  <div class="in" style="margin-top:300px">
    <span>Lorem</span>
  </div>
</div>