How to scroll content blocks left and right in css - css

Question

I am building a scrolling frame on a web page.
The frame is width: 90% of the page-width.
I have a total of 7 blocks but I only want to show 5 at a time with a left & right button for scrolling left and right. Each block is width: 18%
What are the minimum css styles I should consider to get starting building this?

Answer 1

What are the minimum css styles I should consider to get starting
building this?
Is this what are you trying to achieve?
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
text-align: center;
}
.wrapper {
display: inline-block;
width: 90vw;
height: 100px;
background-color: lightgray;
padding: 16px 0;
overflow-x: scroll;
text-align: start;
}
.content {
display: inline-block;
height: 100%;
width: calc(90vw / 5);
text-align: start;
float: left;
}
.content-wrapper {
height: 100%;
width: calc((90vw / 5) * 7);
text-align: start;
}
.buttons-wrapper {
position: absolute;
width: 90vw;
height: calc(100px - 16px);
}
.left-button,
.right-button {
position: absolute;
background-color: black;
width: 30px;
height: 30px;
top: calc(50% - 15px);
color: white;
text-align: center;
}
.left-button {
left: 0;
}
.right-button {
right: 0;
}
<div class="wrapper">
<div class="buttons-wrapper">
<div class="left-button">L</div>
<div class="right-button">R</div>
</div>
<div class="content-wrapper">
<div class="content" style="background-color: red"></div>
<div class="content" style="background-color: orange"></div>
<div class="content" style="background-color: yellow"></div>
<div class="content" style="background-color: green"></div>
<div class="content" style="background-color: lightblue"></div>
<div class="content" style="background-color: blue"></div>
<div class="content" style="background-color: violet"></div>
</div>
</div>