如何让弹性项目扩展以适应居中的弹性盒子，达到一定的最大宽度？

Question

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

绿色框是我想用作页面中心列的弹性框。这个 flexbox 包含两个项目。

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

第二个是红框。我希望这个item使用flexbox中的剩余空间，但最多达到一定的max-width。

但是，我希望 flexbox 容器将其宽度限制为 flex 项的大小。也就是说，我想让红框长到某个点，如果它有空间，然后让红蓝框决定绿框的宽度。

我尝试过但对我的用例不太适用的方法：

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

在我探索其他替代方案之前，是否有一个纯 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

Flex 可以重叠。这里的父容器是 html 和 body 但可以是任何其他标签。

html {
  display: flex;
}

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

#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; */ /* what do you expect from that rule ? */
}

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

Answer 2

我找到了一个适用于我的用例的解决方案：与其试图哄 #right 扩大以填充空白空间，不如先强制 #right 达到其全宽，然后在必要时让它缩小。

1. 将body 设置为display: flex
2. 对于#right，设置width: 200px 和flex-shrink: 1（flex-basis 不起作用）

请注意，即使您完全删除了 #left 元素，这仍然有效。

最终的工作 CSS：

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

#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;
  width: 200px;
  flex-shrink: 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 3

编辑：更新的解决方案。

我正在添加一个额外的标记 (#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>