Html 表div的动态宽度

我需要有一个带有

表的div结构，而第一个单元格的宽度应与内容的宽度相同，且不带换行符。第二个单元格应占据剩余宽度

html

<div class="table full-width">
    <div class="table-cell">Cell 1 without br</div>
    <div class="table-cell">Cell 2 just the rest width</div>
</div>

您可以尝试以下方法：

HTML

<div class="table full-width">
    <div class="table-cell">Cell 1 without br</div>
    <div class="table-cell cell-wide">Cell 2 just the rest width</div>
</div>

我强烈建议不要将
明确地样式化为表元素。为此使用默认的HTML元素，或者可能使用更流畅的格式样式，例如
float

但是，我建议您使用更现代的CSS3，它的子级样式
flex-grow
。在这种情况下，它给了你更多的灵活性


div.container{
显示器：flex；
背景颜色：浅灰色；
填充：20px；
证明内容：之间的空间；
}
变小，变大{
填充：20px；
利润率：0.10px；
背景颜色：灰色；
弹性基础：自动；
}
部门收缩{
弹性收缩：1；
}
成长部{
柔性生长：1；
}

这会缩水的！
这会成长的！
为什么不直接使用
表格
、
tr
和
td
？
<div class="table full-width">
    <div class="table-cell">Cell 1 without br</div>
    <div class="table-cell cell-wide">Cell 2 just the rest width</div>
</div>

.full-width {
    width: 100%;
}
.table {
    display: table;
}
.table-cell {
    display: table-cell;
    white-space: pre;
}
.cell-wide {
  width: 100%
}