Html 为什么Flexbox不收缩到其内容？

我正在使用flexbox，并试图缩小它以适应导航栏的大小。没有使用flexbox，导航栏的大小变得太大，所以我认为使用flexbox会很方便。但由于第一个flexbox（导航栏）的额外空间，我的第二个flexbox（我将在其中放置图像和文本）位于非常远的右侧。。。 例如，我尝试使用flex-basis:auto缩小长方体的大小。但是，无论我做什么，flexbox都保持相同的大小：

下面是我的代码：

.flexContainer{
显示器：flex；
证明内容：中心；
弯曲方向：行；
宽度：100%；
}
.flexContainer>div{
利润率：10px；
填充：20px；
字体大小：20px；
文本对齐：居中；
柔性流：行换行；
宽度：500%；
}
.一{
flex:1自动；
弹性基础：自动；
}
.二{
flex:1自动；
}
.侧边栏{
保证金：0；
填充：0；
宽度：200px；
背景色：#dd1d5e；
位置：相对位置；
身高：100%；
溢出：自动；
}
.侧边栏a{
显示：块；
颜色：白色；
填充：16px；
文字装饰：无；
}
/*鼠标上的链接*/
.侧栏a:悬停：未（.active）{
背景色：#ffffff；
颜色：#dd1d5e；
}

这是第二个盒子。

flex:1 auto

等于

flex grow:1

Hi，感谢您的inpu。我想保留flexbox，因为它更容易控制（？），所以当我将

flex:11 auto

调整为

flex:1

或

flex-shrink:1

时，它实际上不会改变任何东西。此外，使用

flex-shrink:1，flex-basis:auto

不会改变。。。。。。。什么是

width:500%

用途（由于

flex:1

1

auto

），它会缩小？；）简单点：代码片段更新的css:

.flexContainer{display:flex；}.flexContainer>div{margin:10px；padding:20px；字体大小：20px；文本对齐：center；}.sidebar{width:200px；背景色：#dd1d5e；溢出：auto；/*是否存在最大高度*/}.sidebar a{display:block；color:white；padding:16px；text decoration:none；}。侧边栏a:hover:not（.active）{background color:#fff；color:#dd1d5e；}

实际上，我刚刚又检查了一次，效果不错！！大小减小了！谢谢！！你能告诉我到底是什么问题吗？我还是有点困惑。。