Html 使父容器拉伸到绝对定位子容器的宽度，反之亦然

我正在为下拉菜单使用一些标记

标记如下：

<div class="select">
    <a href="#" class="anchor menu-active">
        <label>val1</label><span class="arrow"><label></label></span>
    </a>

    <div class="container menu-visible">
        <ul>
            <li>
                <a value="val1" class="item-selected">val1</a>
            </li>
            <li>
                <a value="val2333333333">val2333333333</a>
            </li>
        </ul>
    </div>
</div>

还有小提琴：

我希望尽可能只使用CSS，所以请不要使用javascript解决方案：）

以及一个更好地演示我所说内容的图表：

一些澄清： 如果我有两个不同宽度的容器，其中一个是绝对定位的，我如何将它们匹配在一起，使较短的容器始终扩展到较长容器的宽度

有人能给我一些建议吗？

在这里查看

CSS

.container{
    position: absolute;
    width:150px;
}

.anchor{
    font-weight: bold;
}
ul{
    margin:0;
    padding:0;
}

li{
    background: blue;
    list-style:none;
    margin:0;
    padding:0l
}



.select{
    background: red;
    display: inline-block;
    width:150px;
}

更新

---

选中更新的

不幸的是，宽度不能人为限制。例如，如果您将其中一个列表项更改为非常长，它将伸出容器。您希望的是，如果您的文本超出了宽度，那么它将包装到li中，而不是重叠它。。。。？请告诉我这些文字根本不应该换行。它应该向前延伸，不应该有包裹。例如，如果

li

中的文本是

1111111111111111111111111111111111

，则不应进行换行，只应显示在一行上。而且，我不能有任何固定的宽度。整个东西应该根据里面的内容调整大小。然后如何保持两者的宽度相同。。。。在您的问题中，您提到您希望两个容器的宽度相同？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

.container{
    position: absolute;
    width:150px;
}

.anchor{
    font-weight: bold;
}
ul{
    margin:0;
    padding:0;
}

li{
    background: blue;
    list-style:none;
    margin:0;
    padding:0l
}



.select{
    background: red;
    display: inline-block;
    width:150px;
}