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时，它将退回到auto，这意味着它将使用父元素给定的宽度，而与绝对定位或任何max-width无关。因此，您需要使用百分比或相对单位（如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>

Answer 2

您需要使用App.js设置宽度，并使用width约束宽度。

类似的东西：

max-width

Answer 3

这是绝对元素的逻辑行为，其中它们的宽度服从 shrink-to-fit 算法，因此它们不能超过其包含块的可用宽度。

缩小至适合宽度为：min(max(preferred minimum width, available width), preferred width)。 ^ref

一个想法是通过增加填充来增加可用宽度，因为绝对元素会考虑填充框，然后可以应用负边距来补偿添加的填充。

.out {
  position: relative;
  width: 200px;
  padding-right:400px; /*width + padding = 600px (equal to max-width)*/
  margin-right:-400px;
  height: 400px;
  background-color: blue;
  background-clip:content-box; /* We don't show the background on the padding*/
}

.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>

在这种情况下，实际上不需要填充，因为它是一个块元素，但是在处理内联元素时很有用。

示例：

.out {
  position: relative;
  display:inline-block;
  width: 200px;
  padding-right:400px; /*width + padding = 600px (equal to max-width)*/
  margin-right:-400px;
  height: 300px;
  background-color: blue;
  background-clip:content-box; /* We don't show the background on the padding*/
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}

.extra {
  display:inline-block;
  background:red;
  vertical-align:top;
  margin-top:100px;
}

<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:200px">
    Lorem
  </div>
</div>
<div class="extra">
  some content here 
</div>

使CSS最大宽度大于父级

3 个答案: