2

I'm trying to figure out a way for a parent flex element's width to be set dynamically by it's children, based on the children's flex-basis property.

For example, say I have a parent element (display: flex) with 12 children, each of which have a width of 100px and a flex-basis of 25%. In this case the width of the parent container should be set automatically to 400px. If I update the flex-basis to 50%, the container width should change to 200px.

Is this at all possible?

HTML

<ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  // ...
  <li class="item">12</li>
</ul>

CSS

.container {
  list-style: none;
  background-color: #ccc;
  margin: 0;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
}

.item {
  width: 100px;
  height: 120px;
  background-color: #ff0;
  flex: 1 0 25%;
}

.item:nth-child(3n) {
  background-color: #f0f;
}

.item:nth-child(3n + 1) {
  background-color: #0ff;
}

For convenience, here's a live version of the above code for testing

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
joshfarrant
  • 1,089
  • 1
  • 14
  • 27

0 Answers0