The issue I'm facing involves a parent container with 3 buttons nested inside. The parent container is set to display:inline-flex, however, the justify-content: space-between property is not behaving as expected. Each button has a defined max-width in order for justify-content to work properly when there is extra space available. Despite trying various values for justify-content such as space-around, center, etc., the grouping of buttons moves but they do not separate individually. I have spent some time tinkering with this and reviewing multiple StackOverflow answers without success. Any assistance would be greatly appreciated! You can test the code on this Codepen link where I have provided a simplified version of my Angular code.
To provide more context, here is the relevant production code snippet along with a screenshot:
.loop-container {
display: inline-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
button {
height: 30px;
flex: 1;
}
.cancel {
background-color: red;
}
.home {
background-color: blue;
}
.small {
max-width: 75px;
}
.large {
max-width: 140px;
}<ng-container class="button-container">
<div class='loop-container'>
<button class='cancel small'>Cancel</button>
<button class='home small'>Home</button>
<button class='cancel large'>Cancel Machine</button>
</div>
</ng-container>