How to make a responsive scrollable navbar

Question

I am trying to make a responsive navbar where part of the items become scrollable when the screen size is reduced. It is something like this:

Large screens:

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+  FIXED ITEM +               EMPTY SPACE               + SCROLLABLE ITEM + FIXED ITEM +
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Small screens:

++++++++++++++++++++++++++++++++++++++++++
| FIXED ITEM | SCROLLABL... | FIXED ITEM |
+++++++++++++.<@@@@>--------.+++++++++++++

So far, I have managed to do everything (see here) except the scroll part. Any ideas?

Answer 1

You can force your text to stay on 1 line with the white-space: nowrap property.

#navbar {
  background-color: black;
  color: white;
  display: flex;
  flex: 1;
  justify-content: space-between;
}

.navbar-start {
  margin: 10px;  
}
.navbar-end {
  margin: 10px;
}

.navbar-scrollable {
  background: tomato;
  margin: 10px;

  overflow-x: auto;
  white-space: nowrap;
}

<nav id="navbar">
<div class="navbar-start">
FIXED
</div>
<div class="navbar-scrollable">
+++++++++++ SCROLLABLE CONTENT +++++++++++
</div>
<div class="navbar-end">
FIXED
</div>
</nav>