Html 使元素展开以填充容器，但以最小宽度包裹

如果没有Flexbox，这可能是不可能的，但值得一试

我希望容器中的元素具有弹性，并占用所有可用的横向空间，但当窗口调整大小并达到最小宽度时，它们会卷成第二行。 这把小提琴有两条调查路线：内联块和表

相关代码如下：

.container{
    width:100%;
    background-color: yellow;

}
.container2{
    width:100%;
    background-color: lightblue;
    display:table;

}
.block {
    border:1px solid;
    display:inline-block;
    min-width:100px;
    width:auto;
    height:50px;
}
.cell {
    border:1px solid;
    display:table-cell;
    min-width:100px;
    width:auto;
    height:50px;
}

表格单元格的行为就是这样，但作为表格单元格，它们不应该包装

---

谢谢

我不确定我是否正确理解了你的问题，但我做了一个测试供你检查

基本上，我从User3660695派生了“livedemo”，在所有div中添加了

.flexible

类，并在容器中添加了媒体查询规则：

@media screen and (max-width:480px) {

    .container { display: block }

}

---

希望这就是你想要的行为。干杯

什么控制.cell/.block元素的宽度？它们的大小都一样吗？它们有一个最小宽度，但当父容器足够宽时，它们会扩展以均匀填充空间（非常类似于表格单元格）。当父容器缩小时，它们将被分成两行（与将父容器保持在最小大小相反），有人能解释为什么我的答案被否决吗？我是Stackoverflow的新用户，所以从下一票中学习一些东西会很有帮助，而不仅仅是被激怒。我认为我的回答很有帮助。我认为这是因为作者要求一个没有FlexBox的解决方案。尽管如此，我还是会投票给你，因为它可以在没有FlexBox的情况下使用媒体查询规则来完成，它帮助了我，所以谢谢！）