My goal is to configure a ul element with varying widths using flex. Specifically, I want the first two items in the ul to be 60% width while the last two items should be 40%. However, my flex-basis property doesn't seem to be working as expected.
.container{
border: 1px solid red;
display:flex;
height: 125px;
}
ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
list-style-type: none;
}
ul li{
margin-bottom: 15px;
border: 1px solid blue;
}
/* li:nth-child(1),
li:nth-child(2){
flex-basis: 60%;
}
li:nth-child(3),
li:nth-child(4){
flex-basis: 40%;
} */<div class="container">
<ul>
<li>should be 60%</li>
<li>should be 60%</li>
<li>should be 40%</li>
<li>should be 40%</li>
</ul>
</div>