Html 使用flexbox将左div自动调整为剩余空间，而右div具有最大宽度

目标：得到2个框（红色=左，蓝色=右），蓝色有一个

最大宽度

值（我们不知道它的确切大小），而红色填充它左边的剩余空间

这两个div都用文本填充，如果需要，这些文本将溢出为省略号

尝试过：我对flex相当陌生，非常确定它是解决方案，但一直无法让它工作

我不想使用任何javascript来完成这项工作，因为必须有css的方式来完成

溢出{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
.集装箱{
宽度：100%；
高度：40px；
线高：40px；
宽度：100%；
边框底部：1px纯黑；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
}
.左{
背景色：红色；
灵活流程：1 1自动；
身高：100%
线高：40px；
}
.对{
背景颜色：蓝色；
灵活流程：1 1自动；
最大宽度：200px；
浮动：对；
身高：100%
线高：40px；
}

此文本将填充剩余的空格，如果该空格太长，则进入ellpsis
此文本的最大宽度为200，固定在窗口的右边缘，如果溢出，将进入ellpsis

示例中有很多不必要的代码。这应该适合您：

.container{
显示器：flex；
高度：40px；
边框底部：1px纯黑；
}
.左{
弹性：1；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
线高：40px；
背景色：红色；
}
.对{
最大宽度：200px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
线高：40px；
背景色：浅绿色；
}

此文本将填充剩余的空格，如果该空格太长，则进入ellpsis
此文本的最大宽度为200，固定在窗口的右边缘，如果溢出，将进入ellpsis

首先，您需要使用“行”作为弹性方向

此外，您还未正确使用“flex flow”属性

查找“flex收缩”和“flex增长”。它们有助于确定flex中单个项目的大小

基本上，“收缩”或“增长”值为0表示项目不应收缩或增长。上面的任何数字都是它相对于其他项目及其内容应该收缩或增长的程度

溢出{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
.集装箱{
宽度：100%；
高度：40px；
线高：40px；
宽度：100%；
边框底部：1px纯黑；
溢出：隐藏；
显示器：flex；
弯曲方向：行；
}
.左{
背景色：红色；
弹性收缩：1；
柔性生长：1；
身高：100%；
线高：40px；
}
.对{
背景颜色：蓝色；
柔性生长：1；
弹性收缩：0；
最大宽度：200px；
身高：100%；
线高：40px；
}

此文本将填充剩余的空格，如果该空格太长，则进入ellpsis
此文本的最大宽度为200，固定在窗口的右边缘，如果溢出，将进入ellpsis