Css 你能不能让flexbox项目在碰到它的容器之前不包装'；宽度是多少？

场景：我希望一个flex项目的flex基础是500px。我希望它能够根据需要扩展，不需要包装，但只能扩展到容器的宽度。在这一点上，我希望它包装。容器的宽度应视为响应性的，且不可预测

半示例：

---

我也愿意接受一种不基于flexbox的解决方案。

您只需更新项目即可

.item {
    min-width: 400px;
    background-color: #ffdbef;
}

它们将从400开始，并扩展到容器的任何宽度和包装。如果您想让它在较小的屏幕上表现出不同的行为，那么可以使用媒体查询来完成您需要的操作，这就是响应性设计的工作原理

我用了400，因为在你的笔里是400

更新笔

---

你在问什么？您想要的应该是flex项目的默认行为，而您的小提琴只显示that@Huangism我的代码笔目前以500px的弹性基宽度进行包装。那不是我想要的。我希望它在包装之前扩展到容器的宽度。屏幕截图：我希望url文本将flex项（粉色背景）拉伸到容器的全宽（蓝色背景），然后进行包装。您应该更新问题的措辞，使其更加清晰。如果不需要宽度，为什么要设置宽度？您需要设置宽度吗？html可以改变吗？现在，您有两个不同的flex容器，您正在尝试将它们对齐，这不是flex的工作方式。这两个不同的容器只是展示了我希望它如何工作的一部分。他们彼此没有关系。让我试着澄清一下：我想要：-一个默认起始宽度为500px的某种元素。-我希望里面的文字是左对齐的如果文本增长大于500px，我希望容纳它的元素扩展到500px以外，居中，并且文本不换行。-当包含文本的元素扩展到其容器的宽度（比如1000px，但它可以是任何东西）时，我希望文本开始包装。

.item {
    min-width: 400px;
    background-color: #ffdbef;
}