The flexbox I have contains several items. All of them are displaying correctly except for the last one, which is expanding to the edge of the div.
View the current appearance of the flexbox
As shown in the image, the last element is extending to the container's edge (the black border). I want it to match the appearance of the other three elements. This issue persists even with only 3 elements in the container, as the last one still expands.
This is my HTML:
<div class="container">
<a href="" class="list-group-item clearfix">Item</a>
<a href="" class="list-group-item clearfix">Item</a>
<a href="" class="list-group-item clearfix">Item</a>
<a href="" class="list-group-item clearfix">Item</a>
</div>
CSS:
.container {
display: flex;
flex-direction: row;
border: solid;
}
a {
flex-grow: 1;
margin: 10px;
}
I suspect there may be an issue with the bootstrap class I am using. When I change my HTML to:
<div class="container">
<a href="" style="border: solid">Item</a>
<a href="" style="border: solid">Item</a>
<a href="" style="border: solid">Item</a>
<a href="" style="border: solid">Item</a>
</div>
Any suggestions on how to resolve this issue while retaining the bootstrap class? I've searched online but haven't found a solution yet.