Как растянуть по вертикали цветовой ввод?

Question

Почему цветной ввод не ведет себя так, как все другие типы ввода, когда речь идет о высоте растяжения в контейнере flexbox?

В приведенном ниже примере кода я попытался продемонстрировать проблему. Как видите, все элементы input, за исключением элемента типа color, растянуты на равную высоту элемента strong.

Что происходит и как мне по-прежнему достигать «растянутой» высоты ввода цвета без использования статических значений стилевой высоты?

.flexRow {
  display: flex;
  margin: 10px;
}
input {
  padding: 0;
  overflow: hidden;
}
strong {
  padding: 20px 10px;
  background-color: #ccc;
}

<div class="flexRow">
  <input type="color" />
  <strong>Very high element</strong>
</div>
<div class="flexRow">
  <input type="submit" />
  <strong>Very high element</strong>
</div>
<div class="flexRow">
  <input type="text" />
  <strong>Very high element</strong>
</div>

Эта проблема возникла у меня в Firefox 63 и Chromium 70 в Ubuntu 18.04, пожалуйста, дайте мне знать, если у вас нет такой проблемы с вашей настройкой.

Answer 1

Хорошо, когда вы проверяете тип ввода = цвет (с помощью F12), вы видите следующее:

input[type="color" i] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
    background-color: buttonface;
    cursor: default;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(169, 169, 169);
    border-image: initial;
    padding: 1px 2px;
}

Высота установлена ​​равной 23px, а другие элементы ввода не имеют фиксированной высоты, поэтому они изменят размер с вашим тегом <strong>.

, если вы установили стиль ввода цвета на высоту: авто; это изменит размер:

input[type="color"] {
    height: auto;
}