绝对定位元件的最小宽度和最大宽度

Question

我有一个标准的导航菜单，在某些项目上有子菜单。我希望子菜单具有最小宽度和最大宽度。例如，子项的宽度至少为 150px，在多行中断之前可以增长到 250px 宽。但是，由于子菜单绝对位于相对定位的元素内，因此子项在多行中断之前不会扩展到完整的最大宽度：

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
nav > ul {
font-size: 0;
}
nav > ul > li {
position: relative;
display: inline-block;
font-size: 1rem;
}
nav > ul > li > a {
display: block;
padding: 1em;
background-color: black;
color: white;
}
.sub-menu {
position: absolute;
left: 0;
top: 100%;
}
.sub-menu a {
display: block;
padding: 1em;
color: white;
background-color: red;
min-width: 150px;
max-width: 250px;
}

<nav>
<ul>
<li>
<a>Line Item 1</a>
<ul class="sub-menu">
<li>
<a>Sub Item 1</a>
</li>
<li>
<a>Sub Item 2</a>
</li>
<li>
<a>Sub Item 3</a>
</li>
<li>
<a>Sub Item 4</a>
</li>
</ul>
</li>
<li>
<a>Line Item 2</a>
</li>
<li>
<a>Line Item 3</a>
<ul class="sub-menu">
<li>
<a>Sub Item 1</a>
</li>
<li>
<a>Sub Item 2</a>
</li>
<li>
<a>Long Sub Item 3 forcing sub menu to expand</a>
</li>
<li>
<a>Sub Item 4</a>
</li>
</ul>
</li>
<li>
<a>Line Item 4</a>
</li>
</ul>
</nav>

在a元素上设置较大的显式宽度(如 1000px(会迫使它们展开，但我想防止第一个子菜单扩展超过 150px 的最小宽度。

如何将第一个子菜单保持在 150px 并让第二个子菜单扩展到 250px？

Answer 1

尝试将width: max-content添加到.sub-menu。这应该允许它扩展。

Answer 2

以便根据文本内容长度动态更改列表项的宽度，并保持最小宽度：150px的要求; 和最大宽度：250px;以下作品：

1(删除最小宽度：150px;&最大宽度：250px;从 .子菜单 a

2(添加这个：

.sub-menu {
width:max-content;
width:-webkit-max-content;
width:-moz-max-content;
max-width:250px;
min-width:150px;
}

但是，最大内容在IE，EDGE或Opera Mini上不受支持。所以这取决于这方面对你有多重要。请记住，将来这些浏览器可能会支持它。

正如你提到的，由于现有的 css，子元素不希望大于父元素，所以如果你保持绝对定位，你也需要动态更改父元素的大小。

1(删除最小宽度：150px;&最大宽度：250px;从 .子菜单 a [和以前一样] 2( 添加

ul li {
width:100%; 
max-width:250px;
min-width:150px;
}

工作示例 [包含两种解决方案，但您需要注释掉/取消注释位] = https://codepen.io/FEARtheMoose/pen/GXJzaV

希望这有帮助。