css - 文本输入 - 缩小到最小

Question

我有一个文本字段 (input type="text") 和一个选择列表。文本字段比选择列表宽。它们都在 flex box 的不同行中。如何使用纯 css(无 javascript)使文本字段与选择列表的宽度相同？

看起来像这样:

<div style="display: flex; flex-direction: column">
  <input type="text">
  <select>
    <option>Tiny</option>
  </select>
</div>

发生的是选择列表增长到文本输入的大小(浏览器指定的默认大小)而不是输入缩小到列表的大小。

如果之前有人问过这个问题，我深表歉意(如果有，请提供链接)，但到目前为止，我找不到任何解决这个明显问题的方法。

Answer 1

您可以使输入 position:absolute 以便 select 指定容器的宽度(设置为 inline-block)，然后输入将拉伸(stretch)到这个宽度:

.container {
  display: inline-block;
  position: relative;
}

input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
}

select {
  margin-top: 22px;
}

<div class="container">
  <input type="text">
  <select>
    <option>Tiny</option>
  </select>
</div>

<div class="container">
  <input type="text">
  <select>
    <option>long option</option>
  </select>
</div>

<div class="container">
  <input type="text">
  <select>
    <option>very very long option</option>
  </select>
</div>