CSS flex 布局问题：子元素宽度和 `flex: 1` 解释

CSS flex 布局中，`align-items` 的默认值 `stretch` 会导致子元素占据父元素全部宽度，即使设置了 `display: inline-flex`。解决方法是将子元素的 `align-items` 属性设置为 `flex-start`。此外，文章还解释了 `flex: 1` 的含义及适用场景，`flex: 1` 是 `flex: 1 1 0%` 的简写。

问题

<div id="app">
  <div class="flex">114514</div>
  <div class="test">233</div>
</div>

#app {
  display: flex;
  flex-direction: column;
}

.test {
  padding: 3px;
  background-color: red;
  display: inline-flex;
}

.flex {
  display: flex;
}

在我的想象中 233 应该不会 100% 宽度，但显示的是 100% 宽度

原因

align-items 的默认值是 stretch

解决

.test {
  align-items: flex-start;
}

其他

flex:1 是什么意思？什么场景下适用？

flex: 1 是 flex: 1 1 0% 的简写

https://www.zhangxinxu.com/wordpress/2020/10/css-flex-0-1-none/