absolute div 是否有可能具有 width: auto，同时忽略它的父级宽度？

Question

我正在尝试制作一个 div 可以拉伸以适应其内容，直到某个最大宽度，然后内容应该换行。

使用绝对定位的 div 效果很好——除非其父级的宽度受到限制。当其父级的宽度受到限制时，绝对定位的 div 就像其 max-width 是其父级的 width 一样。

我基本上喜欢绝对定位的 div 到 "pretend" 它的父级有 100% 的宽度，给我很好的 "stretch-to-fit" 行为，同时尊重 max-width 我开始了。

在下面的示例中，我希望第一个 .abs 能够工作，即使它是 "skinny" div.

的子项

.parent {
  position: relative;
  background: #EEE;
  width: 100px;
}
.abs {
  position: absolute;
  max-width: 200px;
  /* width:  auto, but ignore parent! */
}

.parent2 {
  margin-top: 150px;
  background: rgba(0,128,0,.1);
  width: 100px;
}

  <div class="parent">
    <div>
      Doesn't work.
    </div>
    <div class="abs">
      This wraps after 100px, because it's parent has 100px width.
    </div>
  </div>
  
  <div class="parent2">
    <div>
      Does work.
    </div>
    <div class="abs">
      This wraps at 200px, because it's parent is as wide as the viewport, so it honors the max-width of 200px.
    </div>
  </div>

https://jsfiddle.net/nqws2p09/1/

Answer 1

由于在绝对元素的宽度计算中考虑了父元素的填充，因此您可以向父元素添加更多填充：

.parent {
  position: relative;
  background: #EEE content-box; /* Color only the content */
  width: 100px;
  padding-right:200px;
  margin-right:-200px; /*to consume the padding added*/
}
.abs {
  position: absolute;
  max-width: 200px;
}

.parent2 {
  margin-top: 150px;
}

<div class="parent">
    <div>
      Does work.
    </div>
    <div class="abs">
      This wraps after 100px, because it's parent has 100px width.
    </div>
  </div>
  
  <div class="parent parent2">
    <div>
      Does work.
    </div>
    <div class="abs">
      This wraps at 200px, because it's parent is as wide as the viewport, so it honors the max-width of 200px.
    </div>
  </div>

或者考虑定位元素上的大边距：

.parent {
  position: relative;
  background: #EEE;
  width: 100px;
}
.abs {
  position: absolute;
  max-width: 200px;
  margin-right:-200px;
}

.parent2 {
  margin-top: 150px;
}

<div class="parent">
    <div>
      Does work.
    </div>
    <div class="abs">
      This wraps after 100px, because it's parent has 100px width.
    </div>
  </div>
  
  <div class="parent parent2">
    <div>
      Does work.
    </div>
    <div class="abs">
      This wraps at 200px, because it's parent is as wide as the viewport, so it honors the max-width of 200px.
    </div>
  </div>

Answer 2

这有点通过将 abs 包装在宽度比 relative 父级宽得多的绝对 div 中来解决。现在的问题变成了调整大小 wrapper 以拉伸到视口的右侧，这是另一个问题的主题。

.parent {
  position: relative;
  background: #EEE content-box; /* Color only the content */
  width: 100px;
}
.abs-wrapper {
  position: absolute;
  width: 800px;
}
.abs {
  position: absolute;
  max-width: 200px;
  border: 1px solid gray;
}

  <div class="parent">
    <div>
      Doesn't work.
    </div>
    <div class="abs-wrapper">
      <div class="abs">
        This correctly wraps after 200px, because it's parent is a wrapper with a very large width. Thus, this div will stretch-to-fit, and also honor max-width.
      </div>
    </div>
  </div>
  
  
    <div class="parent" style="margin-top: 150px">
    <div>
      Doesn't work.
    </div>
    <div class="abs-wrapper">
      <div class="abs">
        &lt; 200px shrinks to fit.
      </div>
    </div>
  </div>

https://jsfiddle.net/rxwqtpsz/

Answer 3

使用 width: max-content; 强制绝对定位的子元素根据其内容而不是父元素的尺寸调整自身大小。

这也适用于最大宽度。

.parent {
  position: relative;
  background: #EEE;
  width: 100px;
}
.abs {
  position: absolute;
  max-width: 200px;
  width: max-content; /* this forces width: auto */
}

  <div class="parent">
    <div>
      Div inside parent element. This will wrap at 100px.
    </div>
    <div class="abs">
      This absolutely positioned child element wraps after 200px, even though the parent's max-width is set to 100px
    </div>
  </div>

absolute div 是否有可能具有 width: auto，同时忽略它的父级宽度？

Is it possible for absolute div to have width: auto, and also ignore it's parent's width?

css

css-position

width