How to make an input group fill the horizontal space? - css

Question

I am using bootstrap 4, and I have a navbar for small screens, where I would like a search input group to take the width from left all the way to the right, where I have the menu bar icon. I have made a JSFiddle here. How can I make the input group be flexible and take the remaining space that is on the left side after the menu bar?
I can't seem to get the input inside the input group to take the full width of the form wrapper, I have tried with setting the margin-right same width as the menu-bar but that didn't work since, the input inside the input group didn't take the full width. How can I achieve the desired layout?
This is the navbar:
#media (max-width: 767px) {
.navigation-container .form-wrapper {
width: 100%;
margin-right: 32px;
}
.navigation-container .menu-button {
position: absolute;
}
.navigation-container .navbar {
height: 50px;
}
}
.navigation-container .nav-link {
padding: 0;
}
.navigation-container .navbar {
background: #fff;
flex-direction: inherit;
align-items: center;
padding: 0;
}
.navigation-container .navbar .btn {
font-size: 14px;
}
.navigation-container .navbar .right-side-bar #nav-icon1 {
width: 22px;
top: 10px;
right: 10px;
cursor: pointer;
padding: 0.85rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #008489;
border-radius: 8px;
opacity: 1;
left: 0;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(1) {
top: 0.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(2) {
top: 0.8rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1 span:nth-child(3) {
top: 1.3rem;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(1) {
top: 0.8rem;
background: #008489;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
.navigation-container .navbar .right-side-bar #nav-icon1.open span:nth-child(3) {
top: 0.8rem;
background: #008489;
}
.navigation-container input {
border: 0;
}
.navigation-container i {
color: #008489;
font-size: 28px;
}
.navigation-container .input-group-addon {
background: #fff;
border: 0;
padding: 0;
border-radius: 0;
}
.search-button {
background: transparent;
border: 0;
}
.search-button i {
font-size: 22px;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<div class="navigation-container">
<div class="container top-menu">
<nav class="navbar navbar-light bg-faded">
<div class="hidden-md-up nav-small">
<div class="form-wrapper">
<form action="/search" method="get">
<div class="input-group">
<span class="input-group-addon">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
</div>
<div class="right-side-bar">
<div id="nav-icon1" class="menu-button hidden-md-up">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="navbar-collapse collapse justify-content-between" id="navbar5">
<form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search">
<div class="input-group big-screen-search-form">
<span class="input-group-addon" id="basic-addon1">
<button type="submit" class="search-button">
<i class="ion-ios-search-strong"></i>
</button>
</span>
<input type="text" id="search-input" name="q" class="search-input form-control aa-input-search" placeholder="Search for players and videos ..." aria-describedby="basic-addon1">
</div>
</form>
<ul class="navbar-nav my-auto">
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ion-ios-gear-outline"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Admin dashboard</a>
<a class="dropdown-item">
Log out
</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>

Answer 1

If you don't want to use flex, you can use a width calc and just make room for the hamburger button:
.nav-small { width: calc(100% - 40px); }

Answer 2

The problem is your internal .nav-small is not getting flex properties, so it isn't sizing. If I give it flex grow (1 0 0) and also make it display:flex so its internal pieces position properly, it works.
Here's a fiddle: https://jsfiddle.net/s1vz7xt3/5/ - I simply added
.nav-small {
flex: 1 0 0;
display: flex;
}