in flexbox how to have children width equal to parent width?

Issue

I have difficulties understanding how the width property works on children items of a flex container ?

I would like to know what is the reliable cross-browser way of having the child element having a width that takes all the available width of the parent (different from width:100%; as stated in this question : difference between width auto and width 100 percent)

---

WARNING: my question is dependent on the browser, I'm working on firefox (my version is 120.0)

---

from the doc, the default value of width is auto, and the other values are :

<length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)

I want to have a child element take the width of the parent

1. width auto with block works as i expect

   parent -> display: block;

   child -> width: auto;

   ----------------------------------------------------------------
   | ------------------------------------------------------------ |
   | | block                                                    | |
   | ------------------------------------------------------------ |
   ----------------------------------------------------------------
   

2. width auto with flex doesn't do what i want

   parent -> display: flex;

   child -> width: auto;

   ----------------------------------------------------------------
   | --------                                                     |
   | | flex |                                                     |
   | --------                                                     |
   ----------------------------------------------------------------
   

3. width moz-available in flex works with firefox

   parent -> display: flex;

   child -> width: -moz-available;

   ----------------------------------------------------------------
   | ------------------------------------------------------------ |
   | | -moz-available                                           | |
   | ------------------------------------------------------------ |
   ----------------------------------------------------------------
   

see example :

div { border: 1px solid blue; margin-bottom: 10px; }
p   { border: 1px solid red; }
.block { display: block; }
.flex  { display: flex; }

#child_1 { width: auto; }
#child_2 { width: auto;}
#child_3 {
  width: -moz-available;
  // what I found on internet :
  // width: -webkit-fill-available;  /* Chrome */
  // width: fill-available;
}

<div class="block">
  <p id="child_1">block</p>
</div>
<div class="flex">
  <p id="child_2">flex</p>
</div>
<div class="flex">
  <p id="child_3">-moz-available</p>
</div>

(for non firefox users, what i see is something like that :)

----------------------------------------------------------------
| ------------------------------------------------------------ |
| | block                                                    | |
| ------------------------------------------------------------ |
----------------------------------------------------------------
----------------------------------------------------------------
| --------                                                     |
| | flex |                                                     |
| --------                                                     |
----------------------------------------------------------------
----------------------------------------------------------------
| ------------------------------------------------------------ |
| | -moz-available                                           | |
| ------------------------------------------------------------ |
----------------------------------------------------------------

questions :

1. how can i have the same behavior than -moz-available, but cross-browser compatible ?
2. will -moz-available behaves similarly as width:auto; do width parents display:block; ? or is there 'side effects' like width: 100%; that seems to act the same on simple examples, but actually do not (again : difference between width auto and width 100 percent)
3. why fill-available/-moz-available is not even in the doc ?
4. finally, -moz-available has a usefull behavior in firefox : it also works when parents are block, si I can consistently use it instead of auto to have this desired behavior. Do you know if alternatives for other browser have the same advantage ?

Solution

flex: 1 will take up all available space which seems to be your requirement and represents the alternative to width in a flex container.

.child {
  height:50px;
  flex:1;
  border: 2px solid red;
  background:pink;
}

.parent {
  margin:1em auto;
  display:flex;
  border: 2px solid grey;
  padding:.25em;
  background:lightblue;
}

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

Answered By - Paulie_D