Responsive flex row display until min width reach

Issue

Basically, in a container, I have tabs (with ul.li) and another div (search box) next to these tabs which are displayed in a row using flex.

I want it responsive following this workflow:

• if the width increases, the search section increases to fit the available space. I manage to do using the property flex-basis: 100%
• if the width decreases, the search section decreases as well with the property flex-basis: 100%. However, I would like the search section to decrease until 100px and then tabs will decrease displaying ellipsis. I tried using flex-shrink or flex-grow without success since I am not an expert with flexbox.

I reproduced the simplest example in order to illustrate what I am saying.

body {
  padding: 50px;
  font-family: sans-serif;
}

.container {
  resize: horizontal;
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  border: 1px solid black;
}

.tabs__list {
  align-items: flex-start;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  margin-right: 28px;
  width: unset;
}

button {
  height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search {
  flex-basis: 100%;
  height: 34px;
  align-self: end;
  min-width: 100px;
  background-color: blue;
}

<div class="container">
  <ul class="tabs__list">
    <li>
      <button type="button">Tab Item Number One</button>
    </li>
    <li>
      <button type="button">Tab Item Number Two</button>
    </li>
  </ul>
  <div class="search"></div>
</div>

Solution

You need to make use of the power of flex-grow, flex-shrink and flex-basis properties on the children of your flex container.

This is very handy youtube tutorial from Kevin Powell explaining these properties and other important flex-box concepts.

Anyway, here's a solution to your problem with comments explaining what has been added and why.

body {
  padding: 50px;
  font-family: sans-serif;
}

.container {
  resize: horizontal;
  display: flex;
  overflow: auto;
  align-items: center;
  flex-wrap: nowrap;
  /* don't allow items to go to a new line on shrink */
  border: 1px solid black;
  min-width: 138px;
  /* 100px for the div.search width + 10px inline padding for div.search + 28px margin-rigt from ul.tabs__list */
}

.tabs__list {
  flex-grow: 0;
  /* this forbids ul from growing, so only div.search can take the remaining space */
  flex-shrink: 1;
  /* this allows ul to shrink */
  flex-basis: content;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  margin-right: 28px;
  overflow: hidden;
  /* styling the ul with nowrap so that the li's do not go on the next line on shrink */
  display: flex;
  flex-wrap: nowrap;
}

.search {
  flex-grow: 1;
  /* this allows div.search to grow and take up the remaining space */
  flex-shrink: 0;
  /* this forbids div.search to shrink below 100px */
  flex-basis: 100px;
  /* this works quite like min-width: 100px; but not exactly the same */
  align-self: end;
  height: 45px;
  background-color: blue;
  /* more suggested styling to div.search */
  color: white;
  display: flex;
  align-items: center;
  padding: 5px;
}

.tabs__list li {
  /* display: inline; */
  margin: 5px;
  padding: 5px;
  flex: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* the following styling is applied to give li's the look of a button */
  border: black 1px solid;
  text-align: center;
  background-color: lightgray;
  cursor: pointer;
}

.tabs__list li:hover {
  background-color: gray;
  color: white;
}

<div class="container">
  <ul class="tabs__list">
    <li> Tab Item Number One</li>
    <li>Tab Item Number Two</li>
  </ul>
  <div class="search">Search</div>
</div>

Answered By - Amrovic