CSS - Automatically adjust width of div

Question

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:

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.

Johannes · Accepted Answer · 2016-07-24 19:50:04Z

2

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)

answered Jul 24, 2016 at 19:50

Johannes

67.9k22 gold badges85 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

4lackof Over a year ago

thank you for your quick answer. I tried this and now there are no spaces between the divs, but they are not taking up the remaining space on the right side (looks like they are left-aligning). I edited the code in the above answer as I realized there was a indenting problem with what I put, so it should be easier to read.

4lackof Over a year ago

thank you, added flex-grow: 1; to the children and it works great!

Collectives™ on Stack Overflow

CSS - Automatically adjust width of div

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related