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

Question

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

css

3

我有一个带有提示框的网格列，但为了方便起见，我们称之为父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>

这里有一个示例的CodePen，希望能帮到您，谢谢！

- therippa

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

这可能会影响多个事情。但你可以尝试一下。

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