display: flex не работает в CSS

Question

В моем шаблоне

<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 выглядит так:

div.summary-card {
    display: inline-block;
    margin: 5px 10px 15px 0px;
    display: flex;
}
.cool-grid {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
}

Теперь все они складываются друг на друга.

Но я хочу, чтобы они показывали как:

Я не уверен, как давать классы внутри такого ng-повторения, чтобы они выглядели так.

, так что только синие div внутри ng-switch-default оборачиваются друг вокруг друга, а не вокруг красного div.

Пожалуйста, помогите.

UPDATE

Визуализированный HTML выглядит так:

<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

Я выбрал упрощенную версию, которая, я думаю, делает то, что вы ищете.

Для внешнего div нужно flex-wrap:wrap, для красного - 100%. Затем синие будут перенесены в следующий столбец и размещены в соответствии с теми правилами, которые вы им дадите ...

#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;
}

кодовый код здесь

Answer 2

Проверьте это расположение. Я использовал flex для его генерации

U может изменить высоту красного блока соответственно

Кроме того, синие блоки автоматически переносятся в следующий ряд, когда на той же строке не хватает ширины

* {
  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>

Answer 3

Просто используйте сетку начальной загрузки, чтобы получить нужный макет. Для этого вам не нужно использовать flex на экране.

Ниже приведен пример макета с использованием сетки начальной загрузки

.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>