1

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>
Arman
  • 113
  • 1
  • 9

0 Answers0