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

Posted 2023-03-06

【中文标题】如何制作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]

【发布时间】：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 能够在这种情况下为您提供帮助。希望有用！

【参考方案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.