Html Css将div的宽度缩放为绝对定位同级的宽度

我正在尝试创建一个自定义下拉列表

我们有一个描述：

选择一个值：

，然后是带有所选值的实际下拉列表

x

<代码>a，

b

，

c

，

长值

等是下拉列表中可用的行。下拉列表的行是绝对定位的

 <div class="wrapper">
    <div class="description" style="">Choose a value: </div>
    <div class="custom-select">
      <div class="selected">x</div>
      <div class="options">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>long-value</div>
        <div>e</div>
      </div>
    </div>
  </div>

.wrapper {
  display: flex;
}

.description {
}

.custom-select {
  border: 1px solid black;
  position: relative;
}

.selected {
}

.options {
  position: absolute;
  border: 1px solid black;
}

选择一个值：
x
A.
B
C
长期价值
E
.包装纸{
显示器：flex；
}
.说明{
}
.自定义选择{
边框：1px纯黑；
位置：相对位置；
}
.选定{
}
.选项{
位置：绝对位置；
边框：1px纯黑；
}

我有点卡住了，我如何缩放我的

的宽度。选择的
与我的
的宽度相等。这里的选项
？如何将
长值
放在一行上？也就是说，它不应该被包装

您可以使用柔性和方向柱，而不需要绝对位置：



选择一个值：
x
A.
B
C
长期价值
E
由于您希望显示选定的值，然后允许从列表中选择其他值，因此设置实际的选择元素的样式可能是一种更好的方法
谢谢，这就是我想要的！