html - 如何使<select>占用其内容的大小？

在我的项目中，我具有以下标记：

<div class="foo">
    <div class="bar">
        <select>
            <option>Very looooooooooooooooooooong value</option>
            <option>Some</option>
            <option>other</option>
            <option>value</option>
        </select>
    </div>
</div>

适用于以下CSS样式：

.foo, .bar {
    position: absolute;
}

.foo .bar select {
    min-width: 100px;
}

我的意图是<select>至少要占用其内容的大小。

在Firefox上可以使用。在Chrome上没有。

如果删除封闭的absolute上的两个<div>定位样式之一，则它可以工作。

这看起来像一个Chrome错误，但我不确定。

就我而言，两个父母必须具有absolute位置，因此不幸的是，删除该位置不是一种选择。您知道任何解决方法吗？

演示该问题的jsfiddle是here。

最佳答案

如果在.bar上指定宽度，则将提供一定的灵活性See here

或者，您可以从.bar see here中删除position：absolute

关于html - 如何使<select>占用其内容的大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12212494/