Html 2列布局流体可调宽度

我已经为这个问题寻找了几天的解决方案，但似乎找不到答案。我试图实现的是一个2列布局，其中左列基于浏览器宽度，右列基于内容宽度

右边的列不能有固定的宽度，因为某些内容是从数据库生成的，并且宽度可以不同。我认为这个解决方案需要处理显示问题：内联块，但似乎无法正确处理它。当左列的内容将列的宽度推到比可用空间更宽时，右列跳转到另一行，而不保持内联

我们还需要远离任何javascript，因为一些用户将禁用它

非常感谢您的帮助

以下是我到目前为止的情况：

HTML:

---

您可以尝试使用flexbox：

---

这真是个好工具。我想这可能会有帮助。

在研究了答案之后，我实际上遇到了一些代码，并注意到了一个可能的答案，这个答案似乎有效！我与我的原始代码非常接近，但对显示的看法是错误的：内联块是关键。答案实际上是CSS的细微变化，但最重要的是HTML的顺序

答案是将右栏置于左栏之前。通过这种方式，浏览器可以计算出它认为是左列的剩余宽度，但我们将其向后显示。换句话说，我们首先在右边布置列，这是根据子列的宽度计算的，然后让浏览器计算左边列的其余宽度。然后在CSS中，我们切换左栏和右栏的位置，以显示我们想要的方式

以下是工作代码：

CSS:

HTML:

HTML:

---

这可能是一个解决方案，跨浏览器兼容性如何？真的很好，每个新浏览器都有它，还有一些旧的需求-webkit-。

<div id='container'>
   <div id='left'> 
      this is some really long text that takes up a lot of room since it is so long
   </div>
   <div id='right'>
      <a>this is a link</a>
   </div>
</div>

#container{
   width: 100%;
   background: red;
}

#left{
   display: inline-block;
   background: green;
}

#right{
   display: inline-block;
   margin: 15px;
   background: yellow;
}

#right a{
   padding: 5px 20px;
}}

    html,
    body{
        height: 100%;
    }

    #container{
        width: 100%;
        min-height: 100%;
        height: 100%;
        background: red;
    }

    #left{
        width: auto;
        background: green;
    }

    #rightWrapper{
        float: right;
        height: 100%;
        background: blue;
    }

    #right{
        margin: 15px;
        background: yellow;
    }

    #right a{
        padding: 5px 20px;
    }

    <div id='container'>
       <div id='rightWrapper'>
           <div id='right'>
              <a>this is a link that grows</a>
           </div>
       </div>
       <div id='left'>
          this is some really long text that takes up a lot of room since it is so long ........
       </div>
   </div>

    #container{
        width: 100%;
        display: table;
        background: red;
    }

    #left{
        display: table-cell;
        background: green;
    }

    #right{
        display: table-cell;
        width: 50px;
        background: yellow;
    }

    #right a{
        padding: 5px 20px;
    }

    <div id='container'>
       <div id='left'>
          this is some really long text that takes up a lot of room since it is so long ........
       </div>
       <div id='right'>
          <a>this is a link that grows</a>
       </div>
   </div>