flex: 1;
box-sizing:border-box;
overflow:scroll;
代码考出来自己看效果
<!DOCTYPE html>
<html>
<head>
<style>
.div-f{
display: flex;
}
.item_f{
flex: 1;
background-color: aqua;
}
.c-box{
width: 100px;
height: 100px;
background-color: darkorange;
}
.c-box1{
width: 100px;
height: 100px;
box-sizing: content-box;
padding: 10px;
border:2px solid #000;
background-color: darkorange;
}
.b-box{
width: 100px;
height: 100px;
background-color: darkorange;
}
.b-box1{
width: 100px;
height: 100px;
box-sizing:border-box;
padding: 10px;
border:2px solid #000;
background-color: darkorange;
}
.ssdd {
width: 300px;
height: 140px;
background-color: darkorchid;
overflow:scroll;
}
.fssdd{
width: 600px;
height: 100px;
background-color: darksalmon;
}
</style>
</head>
<body>
<div class="div-f">
<div class="item_f">dsdsd</div>
<div class="item_f" style="background-color: blueviolet;">dsdsd</div>
<div class="item_f" style="background-color:coral">dsdsd</div>
<div class="item_f" style="background-color:darkgreen">dsdsd</div>
</div>
<div class="div-f">
<div class="item_f">dsdsd</div>
<div style="background-color: blueviolet;">dsdsd</div>
<div style="background-color:coral">dsdsd</div>
<div style="background-color:darkgreen">dsdsd</div>
</div>
<div class="c-box">content-box</div>
<div class="c-box1">content-box</div>
<div class="b-box">border-box</div>
<div class="b-box1">border-box</div>
<div class="ssdd">
<div class="fssdd">123455677899009876543</div>
</div>
</body>
</html>