绝对 div 是否有可能具有宽度：自动，并且还忽略它的父宽度？

Question

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

使用绝对定位的div 可以正常工作——除非其父级的宽度受到限制。当其父级的宽度有限时，绝对定位的div 就像其max-width 是其父级的width。

我基本上希望绝对定位的div“假装”它的父级具有 100% 的宽度，并给我一个很好的“拉伸以适应”行为，同时尊重我设置的 max-width .

在下面的示例中，我希望第一个 .abs 工作，即使它是“瘦” 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

使用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>

Answer 2

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

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

通过将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/