Button content does not stretch with flex box

Question

I am trying to make accessible menu with button components, but for some reason when I reuse the same css it does not extend. I tried the "min-width" solution but then if I have any margin it goes out of the box (like in third example)

So example1 and example2 uses the same class but gets different result.

Why the button acts differently than div even though it has the same display method?

(Difference between 100% margin question: I am asking specifically for button "hidden" parameters that affects shrinking compared to div)

.test {
  background: orange;
  width: 300px;
}

.test2 {
  all: unset;
  margin-left: 8px;
  display: flex;
  justify-content: space-between;
}

.test2-with-minwidth {
  min-width: 100%;
}

<div class="test">
  <div class="test2">
    <div class="left">hello2</div>
    <div class="right">world</div>
  </div>
  <button class="test2">
    <div class="left">hello2</div>
    <div class="right">world</div>
  </button>
  <button class="test2 test2-with-minwidth">
    <div class="left">hello2</div>
  <div class="right">world</div>
</button>
</div>

Cédric · Accepted Answer · 2022-10-10T10:30:45.990

It happens because you add margin to a width set to 100%.

You are probably looking for fill-available (CanIUse).

.container {
  background: orange;
  width: 300px;
}

.content {
  margin-left: 8px;
  display: flex;
  justify-content: space-between;
  min-width: 100%;
}

.fill-available {
  min-width: unset; /* not needed without the min-width above*/
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}

<div class="container">
  <div class="content">
    <div class="left">hello2</div>
    <div class="right">world</div>
  </div>
  <div class="content fill-available">
    <div class="left">hello2</div>
    <div class="right">world</div>
  </div>
</div>

The difference between the div and button in your snippet comes from that a div takes by default all the remaining width while a button takes its content (plus some padding) as width.

.container {
  width: 300px;
  border: 1px solid black;
}

.content {
  background-color: orange;
}

<div class="container">
  <div class="content">content</div>
  <button class="content">content</button>
</div>

I see that the question got closed as a duplicate pointing to a most upvoted answer using calc(). I wonder what's is the best between `fill-available` and `calc()` — Cédric, Oct 10 '22 at 10:09
Hey, I loved your fill available approach, sadly it's still experimental so can't use on production. The only question left is why button behaves differently for it — OvidijusR, Oct 10 '22 at 10:15

Button content does not stretch with flex box

1 Answers1