Поле простого поиска обрабатывается по-разному в каждом браузере

Question

Я реализую поле поиска, которое состоит из поля ввода и значка svg. Вот текущее поведение браузера в Chrome, Firefox и IE11

Chrome - идеальная версия

Firefox

IE11 (wtf)

Вот рабочая демонстрация кода, размещенного на codepen.

HTML

<div class="input-wrap">
  <input placeholder="Search…" />
  <div class="icon">
    <svg viewBox="0 0 100 100">
      <g transform="scale(4,4)">
        <path d="M2.2,9.1c0-3.8,3.1-6.9,6.9-6.9c3.8,0,6.9,3.1,6.9,6.9c0,3.8-3.1,6.9-6.9,6.9C5.3,16,2.2,12.9,2.2,9.1zM24,22.4l-7.7-7.7c1.3-1.6,1.9-3.6,1.9-5.6c0-5-4.1-9.1-9.1-9.1C4.1,0,0,4.1,0,9.1s4.1,9.1,9.1,9.1l0,0c2,0,4-0.7,5.6-1.9l7.7,7.7L24,22.4z"></path>
      </g>
    </svg>
  </div>
</div>

CSS

* { box-sizing: border-box; }
html { font-size: 15px; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-wrap { position: relative; }

input {
  font-size: 1rem;
  padding: 20px;
  width: 400px;
  outline: none;
  border: 1px solid black;
}

.icon {
  position: absolute;
  border: 2px solid blue;
  right: 0;
  top: 0px;
  bottom: 0px;
  padding: 10px;
}

.icon svg {
  height: 100%;
  border: 2px solid yellow;
}

Синяя рамка представляет родителя svg, а желтая - svg. Chrome определяет размер родительского svg в соответствии с содержимым svg. Firefox делает родительский элемент svg охватывающим все поле поиска. Я не знаю, чем занимается IE. Мне нужно унифицировать их поведение , чтобы оно работало как Chrome , сохраняя при этом одну ключевую характеристику поля поиска: Не использовать фиксированные длины! Все основано на рем, то есть если, например, размер корневого шрифта увеличивается, все поле поиска должно соответственно масштабироваться. Я хочу избежать участия JS.

Любые предложения приветствуются!

Answer 1

Попробуйте этот код, я удалил абсолютное позиционирование, добавил flexbox и переместил ширину 400px к родителю:

* { box-sizing: border-box; }
html { font-size: 15px; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input-wrap { 
  position: relative; 
  display: flex;
  flex-direction: row;
  width: 400px;
}

input {
  font-size: 1rem;
  padding: 20px;
  outline: none;
  border: 1px solid black;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.icon {
  border: 2px solid blue;
  right: 0;
  top: 0px;
  bottom: 0px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
}

.icon svg {
  height: 100%;
  border: 2px solid yellow;
  height: 2rem;
}