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

问题

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