Circle button without wrapping with a div

Question

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/

score 2 · Accepted Answer · answered Mar 11 '19 at 01:37

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

Thanks! Still, why does the width ever change, if I'm explicitly saying "width: 50pt", not a percentage, auto, or whatever? Is "width" simply a "suggestion"? — Chrischpo, Mar 11 '19 at 01:56
@Chrischpo it's because setting width implies to the object to be "50pt" width initially. So when the container shrinks, so does its child elements. Min-width assigns a minimum width to any elements regardless of its container's width. — The Terrible Child, Mar 11 '19 at 03:18
@Chrischpo no need min-width setting, all you need is `flex-shrink:0` — Temani Afif, Mar 11 '19 at 08:20

Circle button without wrapping with a div

1 Answers1