Button content does not stretch with flex box [duplicate] - html

Question

This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 4 months ago.
This post was edited and submitted for review 4 months ago and failed to reopen the post:
Original close reason(s) were not resolved
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>

Answer 1

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>