Html 让表格填满剩下的宽度

我的代码：

我希望输入填充剩余的空间。我在这个网站上搜索了不少，但找不到合适的答案

重要提示：右侧的文本是动态的，因此没有绝对宽度

我的HTML结构：

<div class="container">
  <form>
    <div class="input-box">
      <input type="text" placeholder="search..." />
    </div>
  </form>
  <div class="selector">
    <p>
      dynamic content
    </p>
  </div>
</div>

动态内容

您可以使用如下

flexbox

执行此操作：

*{
保证金：0；
填充：0；
}
.集装箱{
宽度：700px；
显示器：flex；
}
形式{
浮动：左；
弹性：1；
}
表格输入框{
宽度：100%；
显示器：flex；
}
表单输入{
填充：10px 15px；
字号：18px；
宽度：100%；
}
.选择器{
浮动：对；
}
.选择器p{
边框：1px实心rgba（0,0,0,0.1）；
填充：10px 15px；
字体大小：20px；
}

动态内容

Flexbox可以做到：

评论解释了方法

*{
保证金：0；
填充：0；
}
.集装箱{
显示器：flex；
/*创建flex容器*/
边缘底部：1米；
}
形式{
弹性：1；
/*扩展到剩余的宽度*/
}
.输入框{
显示器：flex；
/*新型内挠性容器*/
}
表单输入{
填充：10px 15px；
字号：18px；
弹性：1；
/*扩展到剩余的宽度*/
}
.选择器p{
边框：1px实心rgba（0,0,0,0.1）；
填充：10px 15px；
字体大小：20px；
}

Lorem ipsum dolor sit amet。


洛勒姆

谢谢！我很想看看你的解释。顺便说一句，工作得很好@MaartenWolfsen在解释中补充道。。谢谢