<div class="box">
<div class="left">
左
</div>
<div class="right">
右右右
</div>
</div>
记录下两种方法:
方法一:
.box {
width: 200px;
display: flex;
}
.left {
background-color: red;
width: 50px;
}
.right {
background-color: yellow;
flex-grow: 1;
}
这种方法有一个问题,当右边的内容超过宽度,左边会压缩到只显示内容。暂时不知道解决的办法。
方法二:
.box {
width: 200px;
overflow: hidden;
}
.left {
background-color: red;
width: 50px;
float: left;
}
.right {
background-color: yellow;
width: calc(100% - 50px);
float: left;
}