min- and max-width of absolutely positioned element - html

Question

I have a standard navigation menu with sub menus on some items. I want the sub menus to have a min-width and a max-width. For example, the sub items are at least 150px wide and can grow up to 250px wide before breaking on multiple lines. However, since the sub menus are absolutely positioned inside of a relatively positioned element, the sub items will not expand to the full max-width before breaking on multiple lines:
* {
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>
Setting a large explicit width, like 1000px, on the a elements forced them to expand, but I want to keep the first sub-menu from expanding past the min-width of 150px.
How can I keep the first sub menu at 150px and get the second to expand to 250px?

Answer 1

Try adding width: max-content to .sub-menu. This should allow it to expand.

Answer 2

so to dynamically alter the width of the list items depending on the text content length and keep the requirements of min-width:150px; and max-width:250px; The following works:
1) remove min-width: 150px; & max-width: 250px; from .sub-menu a
2) add this:
.sub-menu {
width:max-content;
width:-webkit-max-content;
width:-moz-max-content;
max-width:250px;
min-width:150px;
}
However, max-content is not supported on IE, EDGE or Opera Mini. So it depends on how important that aspect is to you. Keep in mind its likely it will be supported in the future in those browsers.
As you mentioned the child elements do not want to be larger than the parent due to the existing css, so if you keep the absolute positioning, you will need to alter the parents size dynamically as well.
1) remove min-width: 150px; & max-width: 250px; from .sub-menu a [same as before]
2) add
ul li {
width:100%;
max-width:250px;
min-width:150px;
}
Working example [has both solutions in it, but you will need to comment out/uncomment bits where indicated] = https://codepen.io/FEARtheMoose/pen/GXJzaV
Hope this helps.