如何让子元素的最小宽度/最大宽度忽略父元素宽度？

Question

我有一个带有工具提示的网格列，但对于这个例子，我们只称它为父 div 和子 div。

对于设计辞职，子 div 必须设置最小宽度/最大宽度。如果父 div 的宽度大于子 div 的最小宽度，那么一切都很好，子 div 的行为如您所想，如果需要，拉伸以填充到最大宽度点。

但如果父 div 的宽度小于子 div 的最小宽度，则子 div 的宽度不会超过其最小宽度点。

是否可以让子 div 忽略父 div 的宽度，同时仍将其保留为子（我无法将其移出父 div，我知道这将是一个简单的解决方案）？

这是我正在尝试做的一个简单示例：

<style>
    .grid-column {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }   

    .tooltip {
        border: 1px solid green;
        min-width: 200px;
        max-width: 500px;
    }
</style>
<div class="grid-column">
    <div class="tooltip">
        I want this div to stretch out to the max width, and still be flexible if the viewport is shrunk down. blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
</div>

And here is a codepen with the example above

感谢任何帮助，谢谢！

Answer 1

这可能会破坏很多东西。不过你可以试试

.grid-column {
    display: inline;
}

.grid-column {
  border: 1px solid red;
  display: inline;
}
.tooltip {
  border: 1px solid green;
  min-width: 200px;
  max-width: 500px;
}
.ruler {
  width: 500px;
  border-top: 1px solid black;
  margin-top: 50px;
}

<div class="grid-column">
  <div class="tooltip">
    I want this div to stretch out to the max width, and still be flexible if the viewport is shrunk down.
    blah blah blah blah blah blah blah blah blah blah blah blah
  </div>
</div>
<div class="ruler"></div>

那么，.grid-column 将不再是 .tooltip 的包含块，因此它不会限制其宽度。

或者，您可以尝试使用绝对定位从文档的正常流程中删除.tooltip：

.tooltip {
  position: absolute;
}

.grid-column {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
.tooltip {
  border: 1px solid green;
  position: absolute;
  min-width: 200px;
  max-width: 500px;
}
.ruler {
  width: 500px;
  border-top: 1px solid black;
  margin-top: 50px;
}

<div class="grid-column">
  <div class="tooltip">
    I want this div to stretch out to the max width, and still be flexible if the viewport is shrunk down.
    blah blah blah blah blah blah blah blah blah blah blah blah
  </div>
</div>
<div class="ruler"></div>