<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
(function(win,doc){
function change(){
doc.documentElement.style.fontSize=
100*doc.documentElement.clientWidth/750+'px';
}
change();
win.addEventListener('resize',change,false);
})(window,document)
</script>
<style>
.main{
width:7.5rem;
margin:0 auto;
height:3rem;
overflow-y: hidden;
white-space: nowrap;
}
.main .list{
display:inline-table;
}
.main .item{
width:3rem;
height:3rem;
display:flex;
justify-content:center;
align-items:center;
background:#ccc;
}
.main .blue{
background:blue;
}
.main .red{
background:red;
}
.main .black{
background:black;
}
</style>
</head>
<body>
<div class="main">
<div class="list">
<div class="item">
aaa
</div>
</div>
<div class="list">
<div class="item blue">
bbb
</div>
</div>
<div class="list">
<div class="item red">
ccc
</div>
</div>
<div class="list">
<div class="item black">
ddd
</div>
</div>
</div>
</body>
</html>
