Visibility of elements in CSS - css

Question

I'm writing a React app, but my question I'm thinking is not about React but about CSS. I have a bar from which the user can choose a sort option:
<div className="innerLineVisor">
<div className="sortLine" ref={lineRef}>
{cuisines.map(cuisine =>
<div key={cuisine.id} className="sortButton">{cuisine.value}</div>
)}
</div>
</div>
Here are their styles:
.innerLineVisor {
width: 80%;
height: 40px;
border: #C80303 1px solid;
overflow: hidden;
position: absolute;
box-sizing: border-box;
left: 10%;
bottom: 0;
}
.sortLine {
height: 40px;
background-color: white;
position: absolute;
left: 0;
bottom: 0;
display: inline;
transition: 1s;
}
.sortButton {
float: left;
width: 120px;
padding: 5px 10px;
border: darkgray 1px solid;
border-radius: 10px;
background-color: white;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-sizing: border-box;
}
Now when one of the buttons does not fit on the left, I can see part of it. And on the right is empty until the button fits completely.
What can I do to see part of the button on the right as well?
This is the arrow code:
function leftMotion() {
setLimitPositions({...limitPositions, right: false})
if (linePosition + step > 0) {
lineRef.current.setAttribute('style', 'left: 0')
setLinePosition(0)
setLimitPositions({...limitPositions, left: true})
return
}
lineRef.current.setAttribute('style', 'left:' + (linePosition + step) + 'px')
setLinePosition(linePosition + step)
if (limitPositions.left && arrowsPressed.left) {
lineRef.current.setAttribute('style', 'left:' + (linePosition + 10) + 'px')
}
}
function rightMotion() {
setLimitPositions({...limitPositions, left: false})
lineRef.current.setAttribute('style', 'left:' + (linePosition - step) + 'px')
setLinePosition(linePosition - step)
const lineVisorWidth = getLineVisorWidth()
if (lineVisorWidth > (lineLength - (Math.abs(linePosition))) - lineVisorWidth) {
const limitRightPosition = lineLength - lineVisorWidth
lineRef.current.setAttribute('style', 'left:' + (-limitRightPosition) + 'px')
setLinePosition(-limitRightPosition)
setLimitPositions({...limitPositions, right: true})
}
}