在flexbox中如何让子宽度等于父宽度？

Question

我很难理解宽度属性如何作用于 Flex 容器的子项？

我想知道什么是可靠的跨浏览器方式，使子元素的宽度能够获取父元素的所有可用宽度（与此问题中所述的

width:100%;

不同：width auto和width之间的区别） 100%）

---

警告：我的问题取决于浏览器，我正在使用firefox（我的版本是120.0）

---

来自文档，宽度的默认值为auto，其他值是：

|最小内容 |最大内容 |适合内容()

我想让子元素采用父元素的宽度

1. 带块的宽度自动按我的预期工作

   父级 ->

   display: block;

   孩子 ->

   width: auto;

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

2. 带有flex的宽度自动不能满足我的要求

   父级 ->

   display: flex;

   孩子 ->

   width: auto;

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

3. 宽度 moz-可在 Flex 中与 Firefox 配合使用

   父级 ->

   display: flex;

   孩子 ->

   width: -moz-available;

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

参见示例：

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>

（对于非 Firefox 用户，我看到的是这样的:)

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

问题：

1. 我怎样才能拥有与

   -moz-available

   相同的行为，但跨浏览器兼容？

2. -moz-available

   的行为是否与

   width:auto;

   宽度父母

   display:block;

   类似？或者是否存在像

   width: 100%;

   这样的“副作用”，在简单的示例中似乎表现相同，但实际上并非如此（再次：宽度自动和宽度 100% 之间的差异）
3. 为什么

   fill-available

   /

   -moz-available

   甚至不在文档中？
4. 最后，

   -moz-available

   在firefox中具有有用的行为：当父母被阻止时它也可以工作，如果我可以持续使用它而不是

   auto

   来获得这种所需的行为。您知道其他浏览器的替代品是否具有相同的优势？

Answer 1

flex: 1

将占用所有可用空间，这似乎是您的要求，并代表弹性容器中

width

的替代方案。

.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>