CSS - 如何防止 flexbox 中的最后一个项目宽度增长超过可用空间？

Question

在 flexbox 中，我有 2 个未包装的连续元素。第一个具有确定的宽度。我希望第二个元素占用可用空间，所以我使用这个：

flex: 1 1 100%;

到目前为止没有问题。但是在第二个元素内部有额外内容的页面中，元素的宽度会增长到它的父元素的宽度（因为我max-width: 100%在它上面使用过），然后它会超出 flex 容器。如果我使用，wrap则元素会转到下一行，但我不想包装它们。

所以这是我的问题：如何将 flexbox 内元素的宽度设置为完全等于可用空间？不多也不少。

Answer 1

如果使用具有 display flex 的父元素包装器包装这两个元素，则可以通过 flex 属性设置两个内部元素的宽度。

在第一个元素上使用 flex: 0 0 200px 将宽度设置为 200px 和 flex: 1 1 auto 第二个元素填充剩余空间。

行动中的代码

.parent-element{
  display: flex;
}

.first-element{
  flex: 0 0 200px; 
  border: 1px solid red
}

.second-element{
  display:flex; 
  flex: 1 1 auto;
  border: 1px solid blue
}

.second-element-content{
  flex: 1 1 auto; 
  border: 1px solid black
}

    <div class="parent-element">
    	<div class="first-element">first element</div>
    	<div class="second-element">
    		<div class="second-element-content">content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
        	content in second column should now fit fine.. 
    		  content in second column should now fit fine.. 
        	content in second column should now fit fine..
        	content in second column should now fit fine..
        	content in second column should now fit fine..
            </div>
    	</div>
    <div>