Html 两个并排的容器，一个拉伸

我正在尝试实现以下布局： 两个并排的容器，第一个容器具有固定的宽度，第二个容器延伸屏幕的整个长度。第二个容器有一个带有边距的子容器，该边距延伸其父容器的整个长度

我用下面的方法实现了这一点，但它看起来很笨拙，我认为还有更好的方法，但我画的是空白。如果有更好的解决方案，你能提供吗

CSS:

HTML:

我不认为显示：表格单元格适合在这里使用

我使用了剩余边距和float属性

检查这个

---

5年内变化这么大真是太疯狂了。如果有人发现了这一点，这里是最简单的解决方案，截止2020年4月2日，也就是冠状病毒年。 自从flexbox到达后，您现在需要的就是这些

HTML

这是一支密码笔。

---

这似乎与特定问题无关。也许最好是在

 .c1 {
        display: table;
        width:100%;
        height:40px;
        border:2px solid black;
    }

.c1> div:first-child  {
    display:table-cell;
    width:100px;
    background-color:blue;
}

.c1> div:last-child  {
    display:table-cell;
}

.c1 > div:last-child > div {
    position:relative;
    height:100%;
    width:100%
}

.c1> div:last-child > div > div {
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    top:5px;
    background-color:red;
    border-radius:10px;
}

<div class="c1">
    <div>
    </div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

.c1 {
    width:100%;
    height:40px;
    border:2px solid black;
}
.c1> div:first-child {
    width:100px;
    background-color:blue;
    height: 100%;
    float: left;
}
.c1> div:last-child {
    margin-left: 100px;
    height: 100%;
}
.c1 > div:last-child > div {
    position:relative;
    height:100%;
    width:100%
}
.c1> div:last-child > div > div {
    position:absolute;
    left:5px;
    right:5px;
    bottom:5px;
    top:5px;
    background-color:red;
    border-radius:10px;
}

<div class="parent">

  <div class="child-1">
  </div>

  <div class="child-2">
  </div>

</div>

.parent{
  background:blue;
  padding:2px;
  height:40px;
  display:flex;
}
.child-1{
  flex-basis:100px;
  background:green;
}
.child-2{
  background:yellow;
  flex-grow:1;
}