4lackof 4lackof - 4 months ago 9
CSS Question

CSS - Automatically adjust width of div

I have a dropdown bar with a bunch of options available to select. I want them to be inline but also want them to be scale-able so that they take up the entire width of the div (but also allowing multiple options per row). This is a photo of what I have so far:

photo of what I have so far

Here is the html I have:

<h2>FILTERs</h2>
<span>Search:</span>
<input id="searchBox" type="text"></input>
<div id="conts" class="filter">
<div class="label">
<span>Option:</span>
</div>
<div class="content">
<div class="selector">Di1</div>
<div class="selector">Di 12</div>
<div class="selector">D 15</div>
<div class="selector">Div1</div>
<div class="selector">v1234</div>
<div class="selector">Di 3</div>
<div class="selector">D 12</div>
<div class="selector">v 1234</div>
<div class="selector">Di</div>
<div class="selector">D 123</div>
</div>
</div>


and the CSS:

.filter .content{
max-width: 96px;
max-height: 0px;
margin: 0px 12px 0px 4px;
background-color: #808080;
overflow: hidden;
}
#vertnav .filter:hover .content{
max-height: 256px;
}
.content .selector{
background-color: #369;
padding: 8px 4px;
display: inline-block;
text-align: center;
cursor: pointer;
box-sizing: border-box;
transition: .1s !important;
}
.content .selector:hover{
background-color: white;
color: #369;
}


The end goal is that each
<div>
on the same line will automatically fill the width of the row it is on, while not pushing the other
<div>
s onto a new line (aka, not using
display: block;
for example).


I am willing to use JS or jQuery but would prefer to use html and css only for this.

Thank you.

Answer

This is a typical situation for using flexbox:

Define the container as flex-container and give it these settings:

content {
  display: flex;
  flex-wrap: wrap; 
}

(The first setting will do the equal distribution in lines, the second one will put the flex items (children elements) into several lines)