4lackof 4lackof - 1 year ago 80
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:

<input id="searchBox" type="text"></input>
<div id="conts" class="filter">
<div class="label">
<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>

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
on the same line will automatically fill the width of the row it is on, while not pushing the other
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 Source

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)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download