Why won't Flexbox start?

Question

css

Target: a block of 5 cards ( div.block ), 2 of which are at the top (50% of the width of the div.two container ) and 3 of them are at the bottom (33% of the width of the div.three container ). With a gap of 12 pixels.
What does not work: the cards behave like a column, i.e. they do not become in one row, but under each other. I can't find the reason. In another similar case (all blocks of equal width), everything is as it should be. Thanks in advance)).

HTML:

<div class="wrap">
      <div class="two">
        <a class="block">
          <div class="case1">
            
          </div>
          <div class="case2">
            
          </div>
        </a>
        <a class="block">
          <div class="case1">
            
          </div>
          <div class="case2">
            
          </div>
        </a>
      </div>
      <div class="three">
        <a class="block">
          <div class="case1">
            
          </div>
        </a>
        <a class="block">
          <div class="case1">
            
          </div>
        </a>
        <a class="block">
          <div class="case1">
            
          </div>
        </a>
      </div>
    </div>

CSS:

.two, .three {
      display: flex; width: 100%;
      flex-flow: row wrap; justify-content: space-between;
    }
    .two .block, .three .block {
      display: block;
    }
    .two { margin: 0 0 12px 0;  }
    .three { margin: 12px 0 0 0; }
    .two .block { width: calc(50% - 6px); height: 256px; }
    .three .block { width: calc((100% / 3) - 8px); height: 172px; }

Answer 1

Why do you have display: block in css for .two .block, .three .block elements? Set display: flex and everything will work.