Css переполнения содержимого flexbox

Question

У меня есть следующий заголовок с элементами, и я использую flexbox

        <header class="header">
        <div class="row container header__items">

            <h2 class="header__logo">Test</h2>

            <input type="text" class="input input--outlined" placeholder="Serach">

            <h5>Karim</h5>
            <h5>Karim</h5>
            <h5>Karim</h5>
        </div>
    </header>

И мой код s css с классами flexbox у меня есть

.header{
  height: 50px;
  background-color: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  display: flex;
  align-items: center;

  &__items{
    display: inherit;
    flex-direction: row;
    align-items: center;
    background-color: red;
  }

 &__logo{
  font-size: 35px;
  font-weight: 200;
  color: inherit;
 }
}

В следующем заголовок __items переполнен на оси Y. Как я могу это остановить. Смотрите прикрепленный скриншот на красном фоне. Также он не центрирует красную рамку, даже если я уменьшаю ее высоту. Использую materialize css. Я также создал https://codepen.io/geowan/pen/gOpzOEm, который показывает это.

Answer 1

Да sh - в вашей разметке так много неправильных вещей. Во-первых, Materialise css уже создал для вас навигационную панель - зачем изобретать велосипед? Они не используют flexbox, но вы можете адаптировать их пример, чтобы создать то, что вам нужно.

https://materializecss.com/navbar.html

Во-вторых, вы используете строку внутри div это тоже контейнер - и внутри нет никаких столбцов. Вот как это работает:

.container

Это ограничивает ширину содержимого. Считайте, что это внутренняя оболочка.

.row

Ряды располагаются внутри контейнеров - они добавляют margin-bottom для разнесения и являются контейнером для столбцов.

.col

столбцы располагаются в строках и выкладывают содержимое в столбцы. Пожалуйста, обратитесь к системе сетки, вы не предъявляете иск элементы в соответствии с документацией.

https://materializecss.com/grid.html

input {
  width: auto !important;
}

.links {
  display: flex; 
}

С точки зрения исправления вашего кода, я удалил .row из элемента, поместите justify-content: space -ween в header__items, чтобы отделить три элемента друг от друга, обернули ссылки правой руки в новый div (и отобразили: flex на них), а затем изменили ширину ввода на авто, потому что по умолчанию для материализации установлено значение 100% (таким образом, оно распространяло доступную ширину вашего деления.

https://codepen.io/doughballs/pen/MWwGwme

Вам нужно потратить некоторое время на документы и используйте предоставленные примеры, пока не узнаете, что делаете.