Css比例宽度div与绝对定位兄弟的宽度

Question

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

我们有一个说明：Choose a value:，然后是选定值x的实际下拉列表。 a，b，c，long-value等是下拉列表中可用的行。下拉列的行是绝对定位的。

 <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;
}

我有点卡住了，如何将.selected的宽度缩放到等于.options的宽度？如何将long-value放在一行？即它不应该被包裹。

https://jsfiddle.net/nwnso1ct/

Answer 1

您可以使用弹性和方向列，但您不需要绝对位置：

＆＃13;

＆＃13;

<div style="display: flex;">
    <div style="">Choose a value: </div>
    <div style="border: 1px solid black;position: relative;display: flex;flex-direction:column;">
      <div>x</div>
      <div style="border: 1px solid black;">
        <div>a</div>
        <div>b</div>
        <div>c</div>
        <div>long-value</div>
        <div>e</div>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于您希望显示选定的值，然后允许从列表中选择其他值，因此设置实际的选择元素可能是更好的方法