前端 flex 布局中的项目的flex-basis属性，无法撑开容器
<body>
<div class="bottom">
<div class="terminals">
<div class="terminal"></div>
<div class="terminal"></div>
<div class="terminal"></div>
<div class="terminal"></div>
<div class="terminal"></div>
</div>
</div>
<style>
.bottom {
display: flex;
}
.terminals {
height: 200px;
background: rgba(52, 91, 112, 0.52);
display: flex;
}
.terminals .terminal {
background-color: #831818;
flex-basis: 200px;
border-radius: 10px;
}
</style>
</body>
代码所示 我给 terminal 设置了flex-basis: 200px; 期望效果应该是页面上展示五个terminal，而容器 terminals 的宽度为1000px，但实际上页面上展示空白，terminal和terminals的宽度都为0，
但是我给 terminal设置 flex-shrink: 0; 属性后 页面上能展示五个terminal 但 terminals的宽度依然为0
这是为什么呢？已经咨询过各个GPT模型 均没有得到合理的解释，说明这个看似简单的问题应该没那么简单 所以求助各位老哥解答，谢谢！！
