Панель поиска materializecss не работает должным образом в Chrome

Question

Я создавал дизайн веб-сайта с использованием materializecss без проблем в Firefox, пока я не проверил его снова в Chrome.

Ну, все работает нормально, кроме панели поиска, я использую панель навигации, упомянутую в документации, поэтому я думаю, что с кодом все в порядке, и он работает в Firefox.

Firefox Скриншот:

Снимок экрана Chrome:

HTML код:

  <form class="hide-on-med-and-down">
    <div class="input-field">
      <input id="search" type="search" required>
      <label class="label-icon" for="search"><i class="material-icons">search</i></label>
      <i class="material-icons">close</i>
    </div>
  </form>

Я изменил CSS строки поиска на это (я обнаружил, что в решении аналогичной проблемы здесь):

nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
}

Answer 1

CSS:

.nav-wrapper {
  width:100%;
  background:blue;
  /* this will automatically make the items it contains stretch verically */
  display:flex; 
  justify-content:space-between;
}

/* the form is in your float right unordered list (ul) so add this to fix the chrome layout issue */
.nav-wrapper ul[class="right"] {
  display:flex;
}

form {
  /* don't let the blue bleed through */
  background:white;
}

 /* if you want it to be responsive pick your number and add this css */
@media only screen and (max-width: 480px) {
  flex-direction:column;
}

ссылка о гибких макетах: https://css -tricks.com / snippets / css / a-guide-to-flexbox /