Ввод текста - уменьшить до наименьшего

Question

У меня есть текстовое поле (тип ввода = "текст") и список выбора.Текстовое поле шире, чем список выбора.Они оба в отдельных рядах гибкой коробки.Как я могу сделать текстовое поле такой же ширины, как список выбора, используя чистый CSS (без JavaScript)?

Выглядит примерно так:

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

В результате получается, что список выбора увеличивается до размера текстового ввода (его размер по умолчанию определяется браузером), а не сужается до размера ввода.list.

Я прошу прощения, если об этом спрашивали раньше (если да, ссылка будет оценена), но пока что я не могу найти ничего, что решило бы эту очевидную проблему.

Answer 1

Простое решение будет использовать inline-flex вместо flex:

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

Answer 2

Вы можете сделать ввод position:absolute, чтобы при выборе будет указана ширина контейнера (установлена ​​на inline-block), а затем вход будет растянут до этой ширины:

.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>