如何制作2个内联div，一个是其内容的宽度，第二个是父级剩余空间的宽度[重复]答案

【问题标题】：How to make 2 inline divs, one with the width of its content, second with the width of remaining space of the parent [duplicate]如何制作2个内联div，一个是其内容的宽度，第二个是父级剩余空间的宽度[重复]
【发布时间】：2020-08-23 21:20:59
【问题描述】：

我正在努力使用 flexbox 来实现这一目标

这段代码很自我解释

<div id="inlineWrapper">
    <div class="widthOfTheContent">Some label</div>
    <div class="widthOfRemainingSpace"> <input class="width-100"/> </div>
</div>

我尝试使用 flexbox，但不知道如何使第一个内联 div 占用内容的宽度

【问题讨论】：

我认为Bootstrap 能够在这种情况下为您提供帮助。希望有用！

标签： html css bootstrap-4 flexbox

【解决方案1】：

#inlineWrapper {
  display: flex;
}

.widthOfTheContent {
  background: tomato;
}

.widthOfRemainingSpace {
  flex: auto;
  background: lemonchiffon;
}
.width-100 {
  width: 100%;
}

<div id="inlineWrapper">
    <div class="widthOfTheContent">Some label</div>
    <div class="widthOfRemainingSpace"> <input class="width-100"/> </div>
</div>

您只需将widthOfRemainingSpace 设置为flex: auto 或flex:1

【讨论】：

如果两者都应该以相同的方式工作，那么 flex:auto 或 flex:1 之间有什么区别？
@BartłomiejSobieszek flex:auto 只是 flex: 1 1 auto 的简写。这意味着该元素将吸收任何剩余空间。 flex: 1 是 flex: 1 1 0 的简写。第三个参数是 flex-basis，表示该元素没有起始起始值。您不需要此处的起始值，因为您的输入元素的宽度为 100%

【解决方案2】：

您只需要在要填充空间的元素上使用flex:1：

#inlineWrapper {
  display: flex;
}

.widthOfRemainingSpace {
  flex: 1;
}

.widthOfRemainingSpace input {
  width:100%;
}

Codepen here.

【讨论】：