CSS 3列使左右相等，中间一个自动

Question

如何用css做这个布局？

左边应该等于右边。中间的应该增长到其他列留下的空间

我的布局是

<div id='parent'>
   <div id='col1'></div>
   <div id='col2'></div>
   <div id='col3'></div>
</div>

col1

和/或

col3

可能会丢失，我仍然应该能够使用 css grid

之类的东西制作 3 列和 2 个 div 的网格

我试图向家长提出的申请：

grid-template-columns: 1fr auto 1fr;
display: inline-grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;

但是当中间的内容这么大时，它并不能使左等于右

手动设置左右宽度不是我要找的解决方案。它们是动态的，我应该能够以某种方式使它们相等。它们的实际宽度是最大内容，宽度较小的一列应该与宽度较大的一列相等。中间的应该得到所有剩下的空间。