How to make an input group fill the horizontal space?

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

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

Answer 2

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