<ch5-list size="3"
orientation="horizontal"
indexId="idx"
minWidth="250px"
maxWidth="500px"
minHeight="100px"
maxHeight="150px"
itemWidth="125px"
itemHeight="75px"
scrollbar="true">
<template>
<div class="horizontal-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
<hr>
<ch5-list size="15"
orientation="horizontal"
indexId="idx"
minWidth="250px"
maxWidth="500px"
minHeight="100px"
maxHeight="150px"
itemWidth="125px"
itemHeight="75px"
scrollbar="true">
<template>
<div class="horizontal-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
<hr>
<ch5-list size="500"
orientation="horizontal"
indexId="idx"
minWidth="250px"
maxWidth="500px"
minHeight="100px"
maxHeight="150px"
itemWidth="125px"
itemHeight="75px"
scrollbar="true">
<template>
<div class="horizontal-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
.horizontal-list-item {
border: 1px solid transparent;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
padding: 10px;
display: table;
width: 100%;
height: 100%;
}
.horizontal-list-item span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="columns">
<div class="column">
<ch5-list size="3"
orientation="vertical"
indexId="idx"
minWidth="150px"
maxWidth="165px"
minHeight="100px"
maxHeight="150px"
itemWidth="150px"
itemHeight="75px"
scrollbar="true">
<template>
<div class="vertical-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
</div>
<div class="column">
<ch5-list size="25"
orientation="vertical"
indexId="idx"
minWidth="150px"
maxWidth="165px"
minHeight="100px"
maxHeight="150px"
itemWidth="150px"
itemHeight="75px"
scrollbar="true">
<template>
<div class="vertical-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
</div>
<div class="column">
<ch5-list size="500"
orientation="vertical"
indexId="idx"
minWidth="150px"
maxWidth="165px"
minHeight="100px"
maxHeight="150px"
itemWidth="150px"
itemHeight="75px"
scrollbar="true">
<template>
<div class="vertical-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
</div>
</div>
.vertical-list-item {
border: 1px solid transparent;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
padding: 10px;
display: table;
width: 100%;
height: 100%;
}
.vertical-list-item span {
display: table-cell;
vertical-align: middle;
text-align: center;
}