在一个 flexbox 中，我在一行中有 2 个未包装的元素。第一个具有确定的宽度。我希望第二个元素占用可用空间，所以我使用它：
flex: 1 1 100%;
到目前为止没有问题。但是在第二个元素内部有额外内容的页面中，元素的宽度会增长到它的父级宽度（因为我在上面使用了max-width: 100%），然后它会超出弹性容器。如果我使用wrap，那么元素会转到下一行，但我不想包装它们。
所以我的问题是：如何将元素在弹性框中的宽度设置为完全等于可用空间？不多也不少。
【问题讨论】：
标签： html css responsive-design flexbox
将 flex: auto; 赋予 flexible item，翻译为：
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
和 flex:none; 到 不灵活的那个（结合所需的 width 长度单位或百分比）。 flex:none 翻译为：
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
看看它的工作原理：
.flex {
display: flex;
}
.flexible {
flex: auto;
border: 1px solid blue;
}
.inflexible {
flex: none;
width: 200px;
border: 1px solid red;
}<div class="flex">
<div class="flexible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
</div>
<div class="inflexible"></div>
</div>
<div class="flex">
<div class="flexible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit ut tortor pretium viverra suspendisse. Mi tempus imperdiet nulla malesuada. Habitasse platea dictumst quisque sagittis purus sit. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Pretium quam vulputate dignissim suspendisse in est. Libero nunc consequat interdum varius. Lectus mauris ultrices eros in cursus turpis massa tincidunt. Nisl tincidunt eget nullam non. Turpis massa sed elementum tempus egestas sed sed risus pretium. Ut ornare lectus sit amet est placerat. Bibendum ut tristique et egestas quis ipsum. Augue ut lectus arcu bibendum at. Amet consectetur adipiscing elit duis. Aliquam vestibulum morbi blandit cursus risus at ultrices mi tempus. Nisl purus in mollis nunc sed id semper risus. Ornare aenean euismod elementum nisi quis.
</div>
</div>
<div class="flex">
<div class="flexible"></div>
<div class="inflexible"><p>Arcu dictum varius duis at consectetur lorem donec massa sapien. Blandit turpis cursus in hac habitasse platea. Malesuada pellentesque elit eget gravida cum sociis. Massa id neque aliquam vestibulum morbi blandit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Ac turpis egestas sed tempus urna et. Sed risus ultricies tristique nulla. Velit aliquet sagittis id consectetur. Sit amet luctus venenatis lectus magna. In dictum non consectetur a erat nam at lectus. Risus nullam eget felis eget. Quis lectus nulla at volutpat diam. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Ultricies leo integer malesuada nunc vel risus. Vitae auctor eu augue ut lectus arcu. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Pharetra sit amet aliquam id.
<p>Porta non pulvinar neque laoreet suspendisse interdum. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Ultrices in iaculis nunc sed augue lacus viverra. At imperdiet dui accumsan sit amet. Urna condimentum mattis pellentesque id nibh. Enim diam vulputate ut pharetra sit amet. Vel pharetra vel turpis nunc. Et ligula ullamcorper malesuada proin libero. Proin libero nunc consequat interdum varius sit. Nisi porta lorem mollis aliquam. Volutpat odio facilisis mauris sit amet massa. Arcu odio ut sem nulla pharetra diam. Gravida arcu ac tortor dignissim convallis aenean. Tellus cras adipiscing enim eu turpis. Risus pretium quam vulputate dignissim.</div>
</div>观察：如果没有为inflexible项指定width，它将根据其内容占用空间，剩余空间将有争议（或填充）由灵活的项目（S）。在这种情况下，您可能希望为 flexible 项指定 min-width，以确保它不会被其兄弟项压扁。
【讨论】：
如果您使用具有 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>【讨论】：
尝试设置第二个孩子增长和缩小，第一个孩子只缩小（如果你想要的话）。
如果您希望它尽可能缩小，请将 .box--fixed 更改为：flex: 0 1 300px。您也可以使用
最终，如果紫色 div 中的内容不能再缩小，它会溢出，所以只需通过 a) 将其包裹或 b) 缩小第一个 div
.wrap {
display: flex;
flex-wrap: nowrap;
}
.box {
flex: 1 1 auto;
min-height: 200px;
background-color: rebeccapurple;
}
.box--fixed {
flex: 0 0 300px;
// flex: 0 1 300px;
background-color: #bada55;
}<div class="wrap">
<div class="box box--fixed"></div>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, dolores animi ab perspiciatis tenetur quis alias illum soluta provident deserunt similique tempore minima consectetur, eaque exercitationem quas nihil nisi voluptates.
</div>
</div>【讨论】：
目前我发现的最佳解决方案是max-width: calc(100% - fixed_width_of_first_element px);
更多关于calc的信息。
【讨论】：
flex: 0 0 300px 和右侧的flex: 1 1 auto 将提供更大的灵活性，无论是添加新的“灵活右侧区域”还是左侧因任何原因更改宽度。