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>
