Css 定位两个div，一个具有固定宽度（左div），另一个具有百分比（右div）

正如标题所说，我想在一行中水平放置两个div。左侧div具有固定宽度（包含图像），而右侧div应占据剩余空间

CSS:

HTML:

  <div class="container">
    <div class="inner_left">test</div>
    <div class="inner_right">Nam a congue risus. Mauris mattis facilisis nisi, eget convallis enim lobortis a. Curabitur non neque nec augue commodo ullamcorper sit amet et lorem! Proin tristique vitae lacus ut consectetur. In at convallis dolor, in laoreet dolor. Etiam in molestie enim! Nunc tincidunt pharetra magna, et sollicitudin enim sodales sed. Morbi pretium sollicitudin lorem, bibendum molestie libero consectetur eu. Nunc aliquet eros purus, vel ultricies sem volutpat quis. Fusce nisi ligula; venenatis tristique turpis sit amet, semper adipiscing ante. Aliquam in justo fermentum, interdum nulla vestibulum, ornare augue.

      </div>    
  </div>

测试
南阿康格岛。Mauris mattis facilisis nisi，eget convallis enim lobortis a。我不知道你是谁！这是我的生命。在康瓦利斯多洛，在拉奥里特多洛。艾蒂安在莫莱斯蒂埃尼姆！这是一家大型制药公司，并在苏打水产品中销售。前苏联时代的晨曦，后苏联时代的自由分子。我爱你，我爱你。尼西舌苔；威尼斯的特里斯蒂克turpis坐在阿梅特，三分钟后离开。阿利奎姆在胡斯托发酵，中间无前庭，奥纳雷奥古斯。

我所尝试的：

只要我不改变浏览器分辨率，第二个链接就可以正常工作。我一减小浏览器宽度，右侧div就转到左侧div下的下一行

我已经用我在工作中拥有的元素创建了jsbin演示。我制作了这个箱子，因为主箱子很大，里面有很多元素

我在Google和stack中搜索了一下，得到了以下链接，但我也尝试了同样的方法，这对我没有任何帮助

如何定位右侧div，使其始终位于左侧div的旁边，并占据剩余的宽度。我无法理解这件事

使用CSS位置

CSS

这与这个答案是同一个问题：

---

像这样吗？当正确的文本不适合时（例如，当宽度非常小时），您想要什么行为？。

.internal\u right

是否应该隐藏溢出的文本，或者容器的高度是否应该增加？不仅仅是它应该减小大小并保持在右侧本身。@Mr.Alien建议的链接非常接近我想要的内容，在做了一些小改动之后，我想它已经达到了我想要的效果。@RoyMJ，不管怎样，这就是我的答案；）

  <div class="container">
    <div class="inner_left">test</div>
    <div class="inner_right">Nam a congue risus. Mauris mattis facilisis nisi, eget convallis enim lobortis a. Curabitur non neque nec augue commodo ullamcorper sit amet et lorem! Proin tristique vitae lacus ut consectetur. In at convallis dolor, in laoreet dolor. Etiam in molestie enim! Nunc tincidunt pharetra magna, et sollicitudin enim sodales sed. Morbi pretium sollicitudin lorem, bibendum molestie libero consectetur eu. Nunc aliquet eros purus, vel ultricies sem volutpat quis. Fusce nisi ligula; venenatis tristique turpis sit amet, semper adipiscing ante. Aliquam in justo fermentum, interdum nulla vestibulum, ornare augue.

      </div>    
  </div>

*{
  margin:0;
  padding:0;  
}

.wrapper{
    margin-top:10px;

    position :relative;
    width: 100%;
    margin: 0px auto;
    height:250px;
}
.inner_left {
  position : absolute;
  top:0;
  left:0;
  bottom:0;
  background: orange;
  width: 250px;


}
.inner_right{
  position :absolute;
  top:0;
  right:0;
  bottom:0;
  left:250px;  
  background:blue; 
}