问题

我创建了一个简单的HTML，如下所示：
```html
<div style="height: fit-content; display: flex">
    <div style="width: 500px; height: 500px; border: black solid 2px"></div>
    <div style="height: auto; width: 500px; border: red solid 2px"></div>
</div>

基本上，我想要页面上有两个容器，一个在左边，一个在右边。左边的容器有一些高度（它可能会被JavaScript更改，但我只是在这里设置了一个固定高度），父容器适应左边容器的高度，右边容器的高度取决于父容器的高度。

我发现对于右边的容器，如果将高度设置为100％，它不会匹配左边容器的高度。相反，高度会塌陷。但是，如果像示例代码中那样将高度设置为auto，一切都正常。

为什么浏览器会有这样的行为？这里的auto是什么意思？非常感谢！

<details>
<summary>英文:</summary>

I make a simple html as

<div style="height: fit-content; display: flex">
<div style="width: 500px; height: 500px; border: black solid 2px"></div>
<div style="height: auto; width: 500px; border: red solid 2px"></div>
</div>

Basically, I want the page has two containers, one by left and one by right. The left container has some height (it maybe changed by js, but I just put a fix height here), the parent container fit the height of the left container, and the right container take the height of the parent container.

I found that for the right container, if I put the height as `100%`, it won't match the height of the left container. Instead, the height will collapse. But if I put height as `auto` as the sample code, everything is fine.

Why the browser has a behaviour like this? What is the `auto` mean here? many thanks!

</details>


# 答案1
**得分**: 2

&quot;auto&quot;的值表示`align-items`的`stretch`值起作用。

来自[CSS Level 1 Flexbox - 9.4. Cross Size Determination - step 11](https://www.w3.org/TR/css-flexbox-1/#algo-stretch)

&gt; 确定每个 flex 项目的使用交叉轴尺寸。**如果 flex 项目具有 align-self: stretch，其计算的交叉轴尺寸属性为 auto**，且其交叉轴边距均不为 auto，则使用的外部交叉轴尺寸是其 flex 行的使用交叉轴尺寸，根据项目的使用最小和最大交叉尺寸进行限制。否则，使用的交叉轴尺寸是项目的假设交叉尺寸。

`stretch` 是 `align-items` 的默认值，在您的示例中起作用。高度的任何其他值都不会导致项目的交叉尺寸拉伸。

100% 然后是非确定高度的百分比，计算为 0。

<details>
<summary>英文:</summary>

The &quot;auto&quot; value means that the `stretch` value of `align-items` has an effect. 

From [CSS Level 1 Flexbox - 9.4. Cross Size Determination - step 11](https://www.w3.org/TR/css-flexbox-1/#algo-stretch)

&gt; Determine the used cross size of each flex item. **If a flex item has align-self: stretch, its computed cross size property is auto**, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max cross sizes. Otherwise, the used cross size is the item’s hypothetical cross size. 

`stretch` is the default value of `align-items` and is in play in your example. Any other value of height will not cause the item&#39;s cross size to stretch. 

100% then is a percentage of an non-definite height and computes to 0.

</details>