Html Flexbox重叠

我试图使用flexbox构建导航栏，但在较小的屏幕上，内容重叠，我知道这可以通过媒体查询避免，但我试图找到一个不使用这些媒体查询的解决方案

正文{
保证金：0；
填充：0；
}
/*导航起点*/
导航{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
填充：0.1em；
}
.搜索框{
显示器：flex；
对齐项目：拉伸；
边界半径：0.5em；
高度：1.75em；
宽度：30%；
}
.搜索框输入{
边界：无；
背景：透明；
大纲：无；
边框：1px实心#00b8e6；
边界权：无；
边界半径：0.5em 0.5em；
填充：0.25em；
弹性：1；
}
.fa搜索{
显示器：flex；
对齐项目：居中；
光标：指针；
边框：1px实心#00b8e6；
左边界：无；
边界半径：0.5em0.5em0；
填充：0.25em 0.2em；
颜色：#00ccff；
}
.fa搜索：悬停{
背景：#ccf5ff；
}
.nav登录基站{
边框：1px纯黑；
显示器：flex；
证明内容：之间的空间；
宽度：17%；
字体大小：1.2米；
}
.nav登录基站a{
文字装饰：无；
}
/*导航结束*/

电子商务

只需更改。搜索框宽度为最小宽度，并对导航元素应用柔性包裹。问题是设置为搜索框的宽度比实际宽度短