css Question posted in
Some basic documentation can be found here.

Flex wrap css issue

I have a HTML structure to show primary and secondary information in one row. Until now, the requirement was to show only 3 elements in a row which works perfectly fine.

but in a given scenario there are additional 3 elements are coming from API which is shrinking the each element.

I want to wrap the next 3 elements in another row. The solution I tried with flex-wrap is not working.
(PS: can’t simply amend the HTML structure as primary information is highlighted first & lazily the secondary info is shown. Please uncomment the code which shows in 1 row.)

.results {
  display: flex;
  flex-direction: row;
}

.primary-container {
  flex: 1 1 33.33333%;
  display: flex;
}


.card {
  flex: 1 1 100%;
  height: 100%;
  display: flex;
  padding: 30px;
  border: 1px solid gray;
}

.secondary-container {
  display: flex;
  flex: 1 1 66.66666%;
}

card.break {
  flex-basis: 100%;
  flex-wrap: wrap;
}
<div class="results">
    <div class="primary-container">
        <div class="card">
          1
        </div>
    </div>
     <div class="secondary-container">
       <div class="card">2</div>
       <div class="card">3</div>
       <!-- <div class="card break">4</div>
       <div class="card">5</div>
       <div class="card">6</div> -->
      </div>
  </div>
Tags:

2

Answers


  1. 0

    You’re on the right track with using flex-wrap, but you need to adjust your CSS a bit.

    .results {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Allow wrapping */
}

.primary-container {
  flex-basis: 33.33333%; /* Initially occupy 33.33% of the space */
}

.card {
  flex: 1 0 auto; /* Allow the card to grow, but not shrink */
  height: 100%;
  padding: 30px;
  border: 1px solid gray;
  box-sizing: border-box; /* Include padding in the width calculation */
}

.secondary-container {
  flex-basis: 100%; /* Occupy full width initially */
  display: flex;
  flex-wrap: wrap; /* Allow secondary cards to wrap */
}

.secondary-container .card {
  flex-basis: 33.33333%; /* Each card occupies 33.33% of the width */
}

/* Define breakpoints for smaller screens if needed */
@media screen and (max-width: 768px) {
  .primary-container,
  .secondary-container .card {
    flex-basis: 50%; /* Two cards in a row for smaller screens */
  }
}

<div class="results">
  <div class="primary-container">
    <div class="card">1</div>
  </div>
  <div class="secondary-container">
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card break">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
  </div>
</div>

    feel free to ask if you’ve questions.

    Login or Signup to reply.
  2. 0

    Try adding flex-wrap: wrap to both the .primary-container and .secondary-container

    .primary-container {
  flex: 1 1 33.33333%;
  display: flex;
  flex-wrap: wrap;
}
.secondary-container {
  display: flex;
  flex: 1 1 66.66666%;
  flex-wrap: wrap;
}

    This should allow the child elements to wrap onto new lines when there is not enough space available in the row.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search