Circle button without wrapping with a div [duplicate] - html

Question

This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 3 years ago.
I'd like to make circle buttons. In this snippet, when the screen is narrow so that both buttons don't fit completely, button A begins to squash, while button B is still a circle (what I want). Button B is wrapped with a div, button A is not.
Two questions:
a) Why simply wrapping button B with a div makes it behave differently?
b) How, if possible, can I get the desired behaviour (button B) without the extra div?
.counter {
display: flex;
margin-top: 10pt;
background-color: #444444;
justify-content: space-around;
align-items: center;
border-radius: 60pt;
width: 100%;
padding: 5pt;
}
button {
outline: none;
}
.btn {
background-color: #222222;
border-radius: 50%;
border: 1pt solid white;
width: 50pt;
height: 50pt;
display: inline-block;
}
.btn-text {
color: white;
font-size: 14pt;
text-align: center;
}
.btn:active {
background-color: #444444;
}
<div class="counter">
<button class="btn"><span class="btn-text">A</span></button>
<div class="btn-div">
<button class="btn"><span class="btn-text">B</span></button>
</div>
</div>
https://jsfiddle.net/njto340f/3/

Answer 1

It is because the width is adjusting with the container, making it compress too.
You must set min-width and min-height to make sure that the width wouldn't go below your desired width and prevent it from shrinking
.counter {
display: flex;
margin-top: 10pt;
background-color: #444444;
justify-content: space-around;
align-items: center;
border-radius: 60pt;
width: 100%;
padding: 5pt;
}
button {
outline: none;
}
.btn {
background-color: #222222;
border-radius: 50%;
border: 1pt solid white;
min-width: 50pt;
min-height: 50pt;
display: inline-block;
}
.btn-text {
color: white;
font-size: 14pt;
text-align: center;
}
.btn:active {
background-color: #444444;
}
<div class="counter">
<button class="btn"><span class="btn-text">A</span></button>
<div class="btn-div">
<button class="btn"><span class="btn-text">B</span></button>
</div>
</div>
Check this fiddle
Source: min/max-width vs width