Css 弹性收缩不更新项目宽度

更新：如果我必须使用flexbox，我认为没有简单的解决方案。我将使用“flex shrink:0”并使用媒体查询来调整设计。无论如何，谢谢你的帮助

我有一个包含多个元素的水平列表（display:flex）。当我减小窗口大小时，列表元素开始收缩。不幸的是，元素的宽度几乎保持不变。li元素占用了太多的空间。我希望li元素的大小适合内容。如果我在li元素中添加“flex-shrink:0”，宽度是正确的，但是我需要这个单词包装

如何解决这个问题

谢谢和问候，

---

Mark

您可以将代码粘贴到此处，以便我们可以查看有关您的问题的更多信息。您也尝试过flex grow属性吗？

请记住，

flex shrink

属性设置flex容器项的

flex shrink

。因此，如果项目大于容器的大小，则项目将收缩以适合容器。在您的情况下，我认为将

flex-shrink

设置为

2

将使单词按照您的要求进行换行。检查此代码段。我希望有帮助

函数myFunction（val）{
document.getElementById（“示例元素”）.style.flexShrink=val；
}

*{
字体系列：arial；
}
.按钮组{
显示器：flex；
对正内容：空间均匀；
宽度：70%；
}
.示例容器{
背景色：#eee；
边框：2米实心；
填充：.75em；
边界半径：10px；
宽度：70%；
左边距：20px；
最大高度：300px；
显示器：flex；
}
.示例容器>div{
利润率：10px；
}
.第一个解决方案>div{
背景色：rgba（0,255,0,0.2）；
边框：3倍纯绿；
柔性生长：1；
弹性收缩：1；
弹性基准：300px；
}
p{
左边距：20px；
}
小{}
.第二种解决办法{
弹性：110；
对正内容：空间均匀；
}
.第二个解决方案>div{
背景色：rgba（255,0,0,0.2）；
边框：3倍纯红；
文本对齐：居中；
}
.第三种解决办法{
柔性包装：包装；
}
.第三种解决方案>div{
背景色：rgba（0,0,255,0.2）；
边框：3件纯蓝；
弹性基准：100px；
文本对齐：居中；
}

申请
申请
申请


我畏缩
项目二
项目三
在第一条评论后添加了更多示例。请随意调整屏幕大小以查看问题，不要将评论作为答案。谢谢您的回复。这是HTML代码：
这是CSS:
#类别ul{display:flex；margin:0-1px0；padding:7px0；}#类别li{padding:0.7px0；margin right:15px；}
我不明白flex grow属性如何解决这个问题。我唯一想要的是列表元素占用它们所需的空间，而不是更多。当问CSS/HTML问题时，你需要包括CSS/HTML。@EternalHour抱歉，我认为没有必要，因为代码不多。谢谢，这可能会有帮助。在您的示例中，只有“I收缩”元素的大小正确。你知道我如何使用这三个元素吗？当然，我根据我的答案更新了代码片段，看看。如果设置它们，使其
弹性基础
为0，则所有元素都将具有相同的起点和增长能力<代码>容器{flex:11；}
#categories ul {
    border-top: 1px solid lightgrey;
    display: flex;
    margin: 0 0 -1px 0;
    padding: 7px 0 0 0;
}

#categories li {
    padding: 0 0 7px 0;
    margin-right: 15px;
    list-style-type: none;
}

<nav id="categories">
                <ul>
                    <li><a href="#">