I am facing a situation where I have a list with an unknown number of items, but I need to control the height of its container. To achieve this, I am using flex-flow: wrap column to split the list. The list starts off hidden and is displayed using jQuery's slideToggle() function.
The issue I'm encountering is that the background of the list is transparent, and I want to add color and rounded corners to it. However, the containing div is only as wide as the first column in the list.
Is there a way for me to make the containing div match the width of the entire list so I can style it properly?
$("#audit_search_btn").click(function () {
$("#image_list").slideToggle();
});
$("#image_list").click(function () {
$("#image_list").slideToggle();
});#audit_search_btn {
height: 30px;
line-height: 30px;
background-color: $lilac;
border: $lilac-border;
color: $btn-text;
text-align:center;
border-radius: 5px;
font-size: 14px;
width:200px;
}
#image_list {
height: auto;
top:30px;
display: none;
position:absolute;
z-index: 99999;
}
ul{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: wrap column;
flex-flow: wrap column;
max-height: 100px;
}
.audit_search_jump {
margin-top:20px;
width:100%;
position: relative;
display: inline-block;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audit_search_jump">
<div id="image_list">
<ul>
<!-- while loop populating list -->
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div id="content">
<div id="audit_search_btn">Image Quick Jump</div>
</div>
</div>