After setting up a flexbox container with some flex-items, I encountered an issue:
When clicking on either "Overview" or "Alerts", the white background border is not displayed. To highlight the selected item, a class called .selected is triggered which adds a white background color. However, when selecting an item, the white border does not span the entire width and the text inside the background is not centered.
Here is the code snippet:
<div className="container">
<div className="flex-item item-1 item">John Smith</div>
<div className="flex-item item-2 item">Male, 26 years old</div>
<div className='flex-item item-3 item' onClick={setSelectedItem} style={style} > Overview</div>
<div className='flex-item item-4 item' onClick={setSelectedItem} style={style}>Alerts</div>
</div>
And here is the CSS code:
.container {
border: 2px solid #57c0e8;
background-color: #57c0e8;
margin-top: 5%;
float: left;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
color:white;
display: flex;
flex-direction: column;
height:40rem;
width:15rem;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
font-size:0.9rem;
}
.flex-item{
margin-top: 2rem;
}
.selected{
background-color: white;
color: #57c0e8;
border-radius: 50px 0 0 50px;
box-shadow: 2px 2px 5px lightgray;
width: 14rem;
height: 5%;
text-align: left;
}