First and foremost, I want to mention that my focus is on studying frontend development, so I could really use some assistance with a task.
I am looking to create a tab slider where the content on the left and right will flank it, ensuring the tab slider remains centered.
The tab slider should consist of two buttons: < (slide to left) and > (slide to right).
Within the tab slider, there are numerous elements whose total width exceeds the max-width of the parent div (which has the "content" class).
To address this issue, I attempted to apply
overflow: hidden;
However, these elements ended up shifting to the 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 am I missing here?
I had hoped that by using overflow and max-height, the exceeding elements would be hidden (on one row to the right) rather than shifting to the second row.
Here is an example of my issue.
Could you provide me with some guidance on how to resolve this?