How to hide elements out of div bounds - html

Question

At the beginning I want to say that I just study frontend so I need to help with something.
I want to prepare some tab slider.
I have something in left and right so my tab slider will be on center.
My tab slider have two buttons: < and > (slide to left; slide to right).
In my tab slider are a lot of elements which sum of widths exceeds a max-width of parent div (it has "content" class).
I want to hide all elements which are out of parent div bounds so I try to use
overflow: hidden;
but unfortunately those elements fell to second row.
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
<li>i-13</li>
<li>i-14</li>
<li>i-15</li>
<li>i-16</li>
</ul>
<i>></i>
</div>
</div>
<div class="right">something in right</div>
</div>
What I'm doing wrong?
I expect that if I use overflow and max-height my exceeds elements will be hide (on right - on one row) and not will be fall to second row.
There is my example.
Will you help me with that?

Answer 1

You need to use white-space: nowrap in .flex so that all items remains in the same line
div.menu {
width: 100%;
display: block;
float: left;
}
div.content {
display: inline-block;
width: 50%;
max-width: 50%;
background-color: lightgray;
max-height: 40px;
overflow: hidden;
}
div.left,
div.right {
display: inline-block;
width: 24%;
background-color: green;
}
div.flex {
display: flex;
white-space: nowrap;
position: relative;
}
ul {
padding-left: 10px;
padding-right: 10px;
}
ul,
li {
display: inline-block;
}
li {
background-color: yellow;
width: 30px;
}
.flex i {
position: absolute;
top: 10px;
}
.flex i.prev {
left: 0;
}
.flex i.next {
right: 0;
}
<div class="menu">
<div class="left">something in left</div>
<div class="content">
<div class="flex">
<i class="prev"><</i>
<ul>
<li>i-1</li>
<li>i-2</li>
<li>i-3</li>
<li>i-4</li>
<li>i-5</li>
<li>i-6</li>
<li>i-7</li>
<li>i-8</li>
<li>i-9</li>
<li>i-10</li>
<li>i-11</li>
<li>i-12</li>
</ul>
<i class="next">></i>
</div>
</div>
<div class="right">something in right</div>
</div>