为什么嵌套flexbox会改变子box的宽度？

Question

问题）为什么嵌套flexbox会改变子框的宽度？

背景）下面的简单flexbox示例可以正常工作。

Flex父容器居中。第一个孩子的宽度为640px，第二个和第三个孩子的宽度为320px。由于flex-shrink:1是flex元素的默认设置，因此这些项目会根据屏幕尺寸成比例缩小。

body {
    margin: 0;
    padding: 0;
    font-size: 2rem;
}
        
.flexParent {
    display: flex;
    margin: 0 auto;
    width: 90%;
    height: 100px;
    background-color: black;
}
        
.flexChildOne {
    flex-basis: 640px;
    background-color: red;
}
        
.flexChildTwo {
    flex-basis: 320px;
    background-color: green;
}

.flexChildThree {
    flex-basis: 320px;
    background-color: blue;
}

<div class="flexParent">
    <div class="flexChildOne">one</div>
    <div class="flexChildTwo">two</div>
    <div class="flexChildThree">three</div>
</div>

但是，当我将第二个和第三个元素放在另一个flex容器中时，它们不再保持其宽度并进一步缩小。为什么给嵌套指定了320px的宽度，嵌套会导致这种情况发生？我正在尝试了解机制。

body {
    margin: 0;
    padding: 0;
    font-size: 2rem;
}
        
.flexParent {
    display: flex;
    margin: 0 auto;
    width: 90%;
    height: 100px;
    background-color: black;
}
        
.flexChildOne {
    flex-basis: 640px;
    background-color: red;
}
     
.flexInterior {
    display: flex;
}     
     
.flexChildTwo {
    flex-basis: 320px;
    background-color: green;
}

.flexChildThree {
    flex-basis: 320px;
    background-color: blue;
}

<div class="flexParent">
    <div class="flexChildOne">one</div>
        
    <div class="flexInterior">
        <div class="flexChildTwo">two</div>
        <div class="flexChildThree">three</div>
    </div>
        
</div>