CSS布局填充剩余的水平空间

我试图实现一个特定的css布局。我尝试了很多可能性，包括浮动和css表，但我就是想不出来。CSS表在过去帮助了我很多，因为有一些固定列和一些应该占用剩余空间的列，但这一列似乎有所不同

我需要有两列。同时，它们需要与它们的父对象具有100%的宽度。右边的栏应该和它的内容一样宽（也就是说，它有三个按钮，应该和这三个按钮一样宽）。左列应占据剩余空间的其余部分。就这样。听起来很简单。在TeX世界中，它被称为“\hfill”，我希望在css中有这样一个命令

以下是我迄今为止所做的尝试：

<section>
<div id="a"></div>
<div id="b">
    <button>Bla</button>
    <button>Test</button>
    <button>Hello</button>
    <button>World</button>
</div>
</section>

还有小提琴：

实际上，这与我想要的非常接近，但是按钮需要在水平方向上彼此相邻。

您需要的是

#b { 
   white-space: nowrap;
}

这将防止按钮缠绕在

div

元素中

试试这个..它可以工作

button
{
   width: 96%;
}

---

这应该可以做到：）

就是这样。非常感谢。

button
{
   width: 96%;
}

#b { display: table; }
button { display: table-cell; }