display: flex not working in CSS - html

Question

In my template
<div class="summary-card">
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch ="cardData.uniqueCardsDataFlag">
<div ng-switch-when=true>
<div style="background-color: red; width:170px; height: 50px;">
1111111
</div>
</div>
<div ng-switch-default>
<div class="cool-grid">
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
</div>
</div>
</div>
</div>
ng-switch will be true only once; hence the red div will be only one and the rest will be blue.
CSS looks like:
div.summary-card {
display: inline-block;
margin: 5px 10px 15px 0px;
display: flex;
}
.cool-grid {
display: flex;
flex-wrap: wrap;
border: 1px solid black;
}
Now, they all stack up on top of each other.
But I want them to show like:
I am not sure how to give classes inside such a ng-repeat to make them look like this.
so that only the blue divs inside ng-switch-default wraps around each other and not around the red div.
Please help.
UPDATE
Rendered HTML looks like:
<div class="summary-card">
<!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!----><div ng-switch-when="true">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: red; width:170px; height: 50px;">
1111111
</div>
</div><!---->
<!---->
</div>
</div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!----><div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div><!---->
</div>
</div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!----><div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div><!---->
</div>
</div><!----><div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!----><div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div><!---->
</div>
</div><!---->
</div>

Answer 1

I've knocked up a simplified version that I think does what you're after.
The outer div needs flex-wrap:wrap, the red one needs to have its flex-basis set at 100%. The blue ones will then wrap to the next column and be laid out out according to whatever rules you give them...
#outer{
height:200px;
border:1px solid grey;
display:flex;
flex-direction:column;
flex-wrap:wrap;
justify-content:space-between;
width:500px;
}
#red{
background-color:red;
width:100px;
flex-basis:100%;
}
.blue{
flex-basis:25%;
width:100px;
background-color:blue;
}
codepen here

Answer 2

Simply use the bootstrap grid to get the layout you want. You do not have to use display flex for that.
Below is an example fot the layout using bootstrap grid
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
}
.red{
background-color:red;
padding: 10px;
margin: 10px;
height: 120px;
}
.blue{
background-color: blue;
padding: 10px;
margin: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-6" class="">
<div class="red">
sd
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<div class="blue">
sd
</div>
</div>
<div class="col-md-6">
<div class="blue">
sd
</div>
</div>
<div class="col-md-6">
<div class="blue">
sd
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

Check this layout. I have used flex for generating it
U can change the height of red block accordingly
Also the blue blocks will wrap automatically to next row, when it doesn't get enough width on the same line
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.summary-card {
display: flex;
flex-direction: row;
}
.left-sec,
.right-sec {
flex: 1;
display: flex;
}
.right-sec {
flex: 1;
display: flex;
flex-wrap: wrap;
}
<div class="summary-card">
<div class="left-sec">
<!---->
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<div ng-switch-when="true">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: red; width:170px; height: 50px;">
1111111
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
</div>
<div class="right-sec">
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!---->
<div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
<!---->
</div>
</div>
<!---->
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!---->
<div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'.....'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
<!---->
</div>
</div>
<!---->
<div ng-repeat="cardData in summaryCardsCtrl.summaryDetails">
<div ng-switch="cardData.uniqueCardsDataFlag">
<!---->
<!---->
<div class="cool-grid" ng-switch-default="">
<!-- <div ng-include="'......'"></div> -->
<div style="background-color: blue; width:170px; height: 50px;">
222222
</div>
</div>
<!---->
</div>
</div>
</div>
<!---->
</div>