CODEWITHSUNDEEP
cssflexbox
Antonio Laguna
Antonio Laguna

Reputation: 9292

Flexbox container not having full width

I'm having a bad time with flexbox right now. I want to create this sort of structure:

enter image description here

Which basically is a list of elements which have subelements. Each element may have more or less items at a given time.

This is what I tried:

<div class="list">
  <div class="element">
    <h3 class="element-title">Title 1</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </div>
  <div class="element">
    <h3 class="element-title">Title 2</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </div>
  </div>
  <div class="element">
    <h3 class="element-title">Title 3</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </div>
  </div>
  <div class="element">
    <h3 class="element-title">Title 4</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </div>
  </div>
</div>

Markup is quite basic.

Here's the CSS (Sass):

.list {
  display: flex;
  flex-wrap: wrap;
}

.element-items {
  display: flex;
}

.element {
  & + & {
    margin-left: 100px;
  }
}

.item {
  background: #fff;
  border-radius: 6px;
  flex-basis: 140px;
  flex-shrink: 0;
  color: #ccc;
  font-size: 11px;

  & + & {
    margin-left: 30px;
  }
}

However, element-items doesn't get the width that should have given the width of the child elements and it overlaps in an awful way.

Code is on a Codepen, to play with: http://codepen.io/Belelros/pen/domoJm?editors=110

Can anyone suggest what could be wrong?

Upvotes: 0

Views: 2270

Answers (1)

Matthew King
Matthew King

Reputation: 1362

If you set width, it works.

.item {
  background: #fff;
  border-radius: 6px;
  flex-basis: 140px;
  width: 140px;
  flex-shrink: 0;
  color: #ccc;
  font-size: 11px;
  height: 140px;
}

Another option is to set flex-basis on .element.

Upvotes: 1

Related Questions