如何让div宽度随父div宽度变化而变化

Question

右边的div宽度固定，如何让左边的div随着父div的宽度变化而宽度发生变化

                                        <div class="card">
                                            <div class="card-left">
                                                <span>供应商ID:0155E0101H</span>
                                                <span>公司名:</span>
                                                <span>优势产品:飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机</span>
                                                <span>产品线:飞机飞机飞机飞机飞机飞机飞机飞机飞机飞机</span>
                                            </div>
                                            <div class="card-right">
                                                <img src="/Uploads/temp/test/pic1.jpg" style="width: 100%;height: 45%">
                                                <img src="/Uploads/temp/test/pic2.jpg" style="width: 100%;height: 45%">
                                            </div>
                                            <div class="clear"></div>
                                        </div>

Answer 1

<div style="width:100%;overflow:hidden;">

<div style="float:right;height:100px;border:1px solid #f00;width:100px;"></div>
<div style="border:1px solid #0f0;height:100px;"></div>

</div>

Answer 2

flex布局

Answer 3

左侧固定，右侧填充的方法，触发BFC

.card-right{
    float:right;
    width:300px
}
.card-right{
    display:table-cell;
    width:2000px;
}

// 或者
.card-right{
    display:block;
    overflow:hidden;
}

右侧固定，左侧填充的话，可以用calc

div {
  height: 100px;
  border: 1px solid red;
}

.card-left{
  float:left;
  width: calc(100% - 130px);
}

.card-right{
  float: right;
  width: 100px;
}