CSS。三列，外部两个可变宽度，但包装其内容，中间扩展以填充可用的水平空间

我有一个简单的html，如下所示：

<div class="row">
  <div class="col col--outer col--left">
    Variable content here but the div should fit snuggly round it
  </div>
  <div class="col col--middle">
    <!-- This div should fill the space left on the row -->
  </div>
  <div class="col col--outer col--right">
    Variable content here but the div should fit snuggly round it
  </div>
</div>

flex-basis：自动用于左、右元素，因此它采用需要显示的确切宽度<代码>柔性增长：0

和

弹性收缩：0

禁止它们调整大小

---

flex-grow:1

和

flex-shorn:1

到中间元素，这样它就占据了所有剩余的空间。

下面的示例将为外部列提供所有空间，而中间元素只会填充剩下的空间

.row{
显示：网格；
网格模板列：自动1fr自动；
/* 
网格模板列：重复（3，1fr）；使其宽度相等*/
宽度：100%；
}
上校--左{
网格柱：1；
}
中校{
网格柱：2；
}
上校，对{
网格柱：3；
}
img{
显示：块；
宽度：200px；/*也可以是100%*/
高度：自动；
}

中间的
这里有这么多的文字

您已将问题标记为CSS，请添加您的CSS@SuperDJ我不知道如何实现所需的结果，因此缺少CSS，然而，我现在发布了基本的CSS，以满足您的要求。这非常有用，让我对使用网格有了一些了解。我很感谢你花时间写这封信。它当然达到了预期的效果。我关心的是支持。首先，我检查了您基于网格的解决方案和@joffrey schmitz的flex解决方案。这两种方法都很有见地，也很有用，但是flex得到了更广泛的支持。这很好，帮助我理解flex。这两种方法都达到了预期的效果，得到了广泛的支持。谢谢你的帮助！

.row {}
.row .col--outer {}
.row .col--middle {}

.row{
    display: flex;
    flex-direction: row ;
    width: 100%
}

.col--left,.col--right{
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.col--middle{
    flex-grow: 1;
    flex-shrink: 1;
}