I have some filter box, each field is a column and options to field are items in column. Problem is that number of options can be greater than column can contain(max-height property setted) and other options overlaps next column.
How I can solve this problem? I need to expand column width to fit all options.
.filter_props_list{
display:flex;
justify-content:flex-start;
}
.filter_props_list .filter_optioncont{
margin:5px;
padding:5px;
border:1px solid #000;
display:flex;
flex-flow:column wrap;
max-height:200px;
}
.filter_propoption{
background-color:green;
margin-bottom:10px;
margin-right:10px;
}
<div class="filter_props_list">
<div class="filter_optioncont">
<div class="filter_propoption">Value 1</div>
<div class="filter_propoption">Value 1</div>
<div class="filter_propoption">Value 1Value 1</div>
<div class="filter_propoption">Value 123</div>
<div class="filter_propoption">Value 1</div>
<div class="filter_propoption">Value 1 Value 1 Value 1</div>
<div class="filter_propoption">Value 1</div>
<div class="filter_propoption">Value 1</div>
<div class="filter_propoption">Value 1</div>
</div>
<div class="filter_optioncont">
<div class="filter_propoption">Value 2</div>
<div class="filter_propoption">Value 2</div>
<div class="filter_propoption">Value 2</div>
</div>
<div class="filter_optioncont">
<div class="filter_propoption">Value 3</div>
</div>
<div class="filter_optioncont">
<div class="filter_propoption">Value 4</div>
<div class="filter_propoption">Value 4</div>
</div>
</div>