Question

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

对于设计重新设计，子div必须设置最小宽度/最大宽度。如果父div的宽度大于子div的最小宽度，那么一切都很好，子div就像你想象的那样，伸展以填充最大宽度点，如果需要的话

但如果父div的宽度小于子div的最小宽度，那么子div的宽度将不会超过其min-宽点。

是否有可能让子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>

如何创建子元素的min-width / max-width忽略父元素宽度？

1 个答案: