Flexbox项目在列中重叠

Question

我有一些过滤器框，每个字段都是一列，字段选项是列中的项目。问题是选项数量可能大于列可以包含的数量（设置了max-height属性），其他选项与下一列重叠。

我如何解决这个问题？我需要扩展列宽以适应所有选项。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;