2

I have a set of divs that contain a variable number of children where the div forms the background color of the "element". When the children wrap, the width of the div defaults to 100%, as shown in this CodePen. What I'm looking for is a way to make the div end at the rightmost child, like [example

Thanks for any help!

.container {
 width: 400px;
 height: 400px;
 background-color: lightgrey;
}

.tagcontainer {
 display: inline-block;
 background-color: blue;
 padding-left: 3px;
 padding-bottom: 3px;
}

.tag {
 float: left;
 padding: 3px;
 background-color: lightgrey;
 margin-bottom: 3px;
}

.tag:not(:last-child) {
 margin-right: 3px;
}
<div class="container">
 <div class="tagcontainer">
  <div class="tag">Lorem</div>
  <div class="tag">Ipsum</div>
  <div class="tag">Dolor</div>
  <div class="tag">Si</div>
  <div class="tag">Amet</div>
  <div class="tag">Consectetur</div>
  <div class="tag">fghfghfghfghfghfghfghhjghghj</div>
 </div>
</div>
Henrik
  • 21
  • 4
  • 1
    Does this answer your question? [Make container shrink-to-fit child elements as they wrap](https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap) – johannchopin Dec 22 '19 at 11:46
  • Look at this... https://codepen.io/AiAbdrrahim/pen/xxbdRWx – AiAbdrahim Dec 22 '19 at 12:14

0 Answers0