html - CSS : How to make two column right fluid left fluid depend on right

Question

我已经搜索过了，但没有适合我的解决方案。我正在尝试制作两列:

Left fluid + Right fluid.

左列包含 100% width 的输入框，左列 width 取决于右列 width。

• B 只是一个文本 div，但我不知道文本的长度。它是动态长度。

• A只是输入框。

因此，如果 B 是较长的文本，则 A 应该较短。

请看下图

有什么建议吗？

Answer 1

您可以使用 Flexbox 并在输入上设置 flex: 1。

.el {
  display: flex;
}
input {
  flex: 1;
  background: #A3FF9A;
}
p {
  background: #FF87DE;
  margin: 0;
}

<div class="el">
  <input type="text">
  <p>Lorem ipsum dolor.</p>
</div>