CSS : 如何使两列右流体左流体依赖于右

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>

Answer 2

试试这个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Site name</title>
    </head>
<style>
        #container{
         width: 900px;
    }
    #container:after{clear: both; display: table; content: "";}
    #container:before{ display: table; content: "";}
    .left-column{
        width: 400px;
        float: left;
        padding: 5px; 
        background: green;
        box-sizing: border-box;
    }
    .left-column input{width: 100%;}
    .right-column{
        float: right;
        padding: 5px;
        width: 500px;
        background: violet;
        box-sizing: border-box;
    }
</style>
<body>
   <div id="container"> 
       <div class="left-column">
           <input name="f-name" type="text"></input>
       </div>
       <div class="right-column">
           Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit, sed do eiusmod tempor 
           incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis nostrud 
           exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat. Duis 
           aute irure dolor in reprehenderit in 
           voluptate velit esse cillum dolore eu 
           fugiat nulla pariatur. Excepteur sint 
           occaecat cupidatat non proident, sunt 
           in culpa qui officia deserunt mollit 
           anim id est laborum.
       </div>
   </div>
</body>
</html>

CSS : 如何使两列右流体左流体依赖于右

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

html

css

fluid-layout

fluid-dynamics