Я пытаюсь создать навигационную панель, используя flexbox, но на меньших экранах контент перекрывается, я знаю, что этого можно избежать с помощью медиа-запросов, но я пытаюсь найти решение без использования этих медиа-запросов.
body {
margin: 0;
padding: 0;
}
/* start of nav */
nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1em;
}
.search-box {
display: flex;
align-items: stretch;
border-radius: 0.5em;
height: 1.75em;
width: 30%;
}
.search-box input {
border: none;
background: transparent;
outline: none;
border: 1px solid #00b8e6;
border-right: none;
border-radius: 0.5em 0 0 0.5em;
padding: 0.25em;
flex: 1;
}
.fa-search {
display: flex;
align-items: center;
cursor: pointer;
border: 1px solid #00b8e6;
border-left: none;
border-radius: 0 0.5em 0.5em 0;
padding: 0.25em 0.2em;
color: #00ccff;
}
.fa-search:hover {
background: #ccf5ff;
}
.nav-login-btns {
border: 1px solid black;
display: flex;
justify-content: space-between;
width: 17%;
font-size: 1.2em;
}
.nav-login-btns a {
text-decoration: none;
}
/* end of nav */
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/8370b7a799.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css" />
<title>Ecommerce</title>
</head>
<body>
<nav class="nav">
<i class="fas fa-bars"></i>
<img src="/img/logo.png" alt="" />
<div class="search-box">
<input type="text" />
<i class="fas fa-search"></i>
</div>
<div class="nav-login-btns">
<a href="#">Sign In</a>
<a href="#">Login</a>
</div>
<i class="fas fa-shopping-cart"></i>
</nav>
</body>
</html>
как мне избежать этого? я ожидал что-то вроде нового ряда, может быть? Я попробовал также с flex-wrap: обернуть, но все равно безрезультатно. Это как-то связано с минимальной шириной?