Html Css flexbox内容溢出

我有下面的标题和项目，我正在使用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>

下面的标题项在y轴上溢出。我怎样才能阻止这一切。请参见红色背景上的附加屏幕截图。而且，即使我降低了红色框的高度，它也不会居中。我使用的是物化css。我还创建了一个示例，显示了这一点

---

Yash-您的标记有太多问题。首先，物化ECSS已经为您创建了导航栏-为什么要重新发明轮子？他们不使用flexbox，但您可以修改他们的示例来创建您需要的内容

其次，您使用的是一个div中的一行，该div也是一个容器，其中没有col。下面是它的工作原理：

.container

这限制了内容的宽度。把它看作是内包装。< /P> .row

行位于容器内部-它们在底部添加边距作为间距，并且是COL的容器

.col

COL位于行内，并将内容以列的形式显示出来。请参考网格系统，您没有根据文档起诉elements

在修复代码方面，我从元素中删除了.row，在标题上添加justify content:space-between，以强制这三个项目彼此分开，将右手链接包装在一个新的div中（这些项目上的display:flex），然后将输入宽度更改为auto，因为物化默认值为100%（所以它是在扩展你的div的可用宽度

---

你需要在文档中花一些时间，并使用所提供的示例，直到你知道你在做什么。< /P>你希望SACHE框在哪里？@ SKM我希望搜索框在中间，并跨越标志和其他右侧项目的剩余宽度。

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

input {
  width: auto !important;
}

.links {
  display: flex; 
}