时间戳

首页 > 解决方案 > 使 CSS 最大宽度大于父级

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

问题描述

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>

标签： htmlcsscss-position

解决方案

好吧，当width提供 no 时，它将回退到auto，这意味着它将使用父元素给定的宽度，而不管绝对定位或任何max-width。因此，您需要使用百分比或相对单位（如or ）指定任何宽度。vhvw

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

推荐阅读