стек делится два на два с гибкой оберткой, не оборачивая

Question

В приведенном ниже фрагменте кода я хотел бы, чтобы div отображался с 2 строками и 2 столбцами в каждой строке.

.column-container {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.wrapper {
  display: flex;
  flex-basis: calc(50% - 40px);
  justify-content: center;
  flex-direction: column;
}

.subject-status-row--count {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="column-container">
  <div class="wrapper">
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div _ngcontent-c17="" class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      30
    </span>
    </div>
  </div>
</div>

Answer 1

Вам нужно дать упаковщику высоту и ширину, чтобы упаковка работала.И вам нужно, чтобы flex-base была шириной / высотой минус границы.

Также в вашем случае у вас есть flex на неправильном контейнере, чтобы заставить упаковку работать.

.flex-wrapper {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  width: 400px;
}

.flex-cell {
  flex: 1;
  border:1px solid blue;
  flex-basis: calc(50% - 2px); //size - border width
  
  // vertically center the content - assume that's what you wanted
  text-align: center;    
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-wrapper">
  <div class="flex-cell">
    <span class="content-center">1</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">2</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">3</span>
  </div>
  <div class="flex-cell">
    <span class="content-center">4</span>
  </div>
</div>

Answer 2

Вы упаковываете .column-container, у которого есть только 1 ребенок: .wrapper.Вы должны обернуть .wrapper, действительно:

.column-container {
  display: flex;
  min-height: 100%;
  flex-direction: row;
}

.wrapper {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}
.wrapper > * {
  flex-basis: calc(50% - 40px);
}

.subject-status-row--count {
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="column-container">
  <div class="wrapper">
    <div class="subject-status-row--count">
      <span>
      10
    </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      10
      </span>
    </div>
    <div _ngcontent-c17="" class="subject-status-row--count">
      <span>
      10
      </span>
    </div>
    <div class="subject-status-row--count">
      <span>
      30
    </span>
    </div>
  </div>
</div>