Css 弹性物品的宽度正在缩小

我有一个带有“display:flex；”的DIV，其中包含两个相邻的子DIV。第一个DIV只是一个包含一些有序列表项的DIV，第二个DIV包含一些图像。第二个DIV应用了

display:flex

和

flex wrap:wrap

出于某种原因，当我给第一个DIV一个200px的宽度时，它不工作了。。。它没有200px的宽度。但是如果我给它一个200px的

minwidth

，那么它可以工作，得到200px的宽度。我需要了解为什么

width

不起作用而

minwidth

起作用

/*包含2个子div的父容器*/
.parent_flex_容器{
显示器：flex；
}
/*第一儿童组*/
#桌面侧菜单{
宽度：200px；
}
/*第二儿童组*/
.flex_容器{
显示器：flex；
柔性包装：包装；
}
/*第二个子DIV的图像*/
.Cac{
最大宽度：50%；
身高：50%；
边缘底部：20px；
填充：0 5px；
}

作为特色的
艺术家姓名

歌曲名称

艺术家姓名

歌曲名称

艺术家姓名

歌曲名称

艺术家姓名

歌曲名称

艺术家姓名

歌曲名称

艺术家姓名

歌曲名称

艺术家姓名

歌曲名称

艺术家姓名

歌曲名称

我需要了解为什么

width

不起作用而

minwidth

起作用

因为flex项目默认设置为

flex收缩：1

，这意味着为了最大限度地减少容器溢出

您的实际代码（浏览器看到的）如下所示：

您需要禁用flex shrink：

#desktop_sidemenu {
   width: 200px;
   flex-shrink: 0;
}

现在，由于该项不能收缩到200px以下，因此它相当于

最小宽度：200px

有关更多详细信息，请参见我的回答中的“弹性收缩系数”：

---

因此，当您使用flexbox时，让我们从这一点开始，每个子项将有3个不同的元素，分别是：

• 弹性基础

• 弯曲生长

• 弯曲收缩

他们每个人都有不同的责任

弹性基础

Flex basis控制元素在被其他Flexbox属性操作之前的默认大小。它可以用作宽度或高度属性。让我们看看下面的例子：

.flexbox{
显示器：flex；
}
瑞德先生{
背景：红色；
弹性基准：100px；
}
格林先生{
背景：绿色；
弹性基准：100px；
}
蓝先生{
背景：蓝色；
弹性基准：100px；
}

1.
2.
3.

谢谢你的回答，我非常感谢！谢谢，现在说得通了。我只使用“flex:00200px

#desktop_sidemenu {
   width: 200px;
   flex-shrink: 0;
}