css - 如何让 flex 元素扩展以适应居中的 flex 盒，直到达到一定的最大宽度？

Question

在下面的演示中，我希望绿色框收紧以正好适合红色和蓝色框。

绿色框是一个 flexbox，我想将其用作页面的中心列。这个 flexbox 包含两个元素。

第一个是固定宽度的蓝色框。

第二个是红框。我希望这个元素使用 flexbox 中的剩余空间，但不超过某个 max-width。

但是，我希望 flexbox 容器将其宽度限制为 flex 元素的大小。换句话说，我希望红色框在有空间的情况下增长到某个点，然后让红色和蓝色框决定绿​​色框的宽度。

我尝试过但不太适合我的用例的方法:

• 在 #column 上设置一个 max-width:元素 #left 不会一直存在，所以这个 max-width 在那些情况下会太大。
• 在 #column 上设置 width: fit-content:这限制了 flexbox 的大小。因此，如果 #right 不包含太多内容(如本例所示)，#right 将不会扩展到其 max-width .
• 使用 CSS 网格:这对我正在处理的布局有一些其他的权衡，不是一个很好的选择。

在我探索其他替代方案之前，是否有纯 CSS 解决方案来实现我所希望的？

body {
  background: #ccc;
  margin: 0;
}

#column {
  background: #fff;
  min-height: 50vh;
  margin: 20vh auto;
  justify-content: center;
  display: flex;
  border: 3px #8F8 solid;
}

#left {
  border: 3px #F88 solid;
  width: 120px; /* A fixed value */
}

#right {
  border: 3px #88F solid;
  max-width: 200px; 
  flex-grow: 1;
}

<div id='column'>
    <div id='left'>
    Left flex item:<br>Fixed width of 120px
    </div>
    <div id='right'>
    Right flex item:<br>Expand up to 200px
    </div>
  </div>

Answer 1

编辑:更新解决方案。

我正在添加一个额外的标记 (#container) 作为 flex-box 容器。

body {
  background: #ccc;
  margin: 0;
}

#column {
  background: #fff;
  border: 3px #8F8 solid;
  
  margin-top: 20vh;
  margin-left: 50%;
  transform: translateX(-50%); /* To centralize the whole element*/
    
  display:inline-block; /*Makes the #column wrap around the content*/
  
}

#container{
  display:flex;
  min-height: 50vh; /*Controls the height*/
}
#left {
  border: 3px #F88 solid;
  width: 120px; /* A fixed value */
}

#right {
  border: 3px #88F solid;
  max-width: 200px; 
}

<div id='column'>
  <div id="container">
    <div id='left'>
    Left flex item:<br>Fixed width of 120px
    </div>
    <div id='right'>
    Right flex item:<br>Expand up to 200px hhhhhhhhhhhhhhhhhhhhhhhh
      hhhhhhhhhhhhhhhhhhhhhhh
    </div>
  </div>
    
</div>