My webpage features a header containing various icons, a title, and a search box that triggers an animation when the search button is clicked. While this setup works seamlessly on larger screens, I encounter issues on smaller screens. My goal is for the search field to expand fully on smaller screens, hiding the icons and title on the left edge. However, I have been unsuccessful in applying the max-width property to the input field.
I have experimented with setting a fixed width for the search field, adjusting flex properties like flex-basis and flex-shrink on different containers, but none of these solutions seem to produce the desired outcome. I am considering simplifying the markup as it currently involves multiple nested flex containers, although this structure was implemented to achieve centered content, responsiveness, and neat spacing.
.wrapper {
background-color: #DDD;
overflow: hidden;
resize: both;
}
header {
background-color: #AAA;
justify-content: space-between;
margin: 0 auto;
max-width: 1000px;
padding: 0 2rem;
}
.flex-center {
align-items: center;
display: flex;
gap: 1rem;
}
.icon {
height: 2rem;
width: 2rem;
}
.icon {
flex: 0 0 auto;
border: none;
background-color: red;
}
.search-field {
background-color: green;
border: none;
flex: 0 0 auto;
height: 2rem;
outline: none;
padding: 0;
transition: 0.3s;
width: 0;
}
.search-field:focus {
max-width: 300px;
width: 100%;
}
.search {
justify-content: flex-end;
}<div class="wrapper">
<header class="flex-center">
<div class="flex-left flex-center">
<button class="icon"></button>
<h1 class="title">Title</h1>
</div>
<div class="flex-right flex-center">
<form class="search-form flex-center">
<input id="search-field" class="search-field" type="search">
<label class="icon" for="search-field"></label>
</form>
<button class="icon"></button>
</div>
</header>
</div>If necessary, I am open to exploring vanilla JavaScript solutions if resolving this issue through CSS alone proves to be unfeasible.