Control width of flex items arranged vertically in a flex container

Instead of flex-direction: column, you can try a wrapping flexbox using flex-wrap: wrap; and you can set:

  1. flex-basis: 50% for the half width divs

  2. flex-basis: 100% for the full width divs

See that I have thrown in box-sizing: border-box to adjust for the widths when using flex-basis.

See demo below:

div {
  border: 1px solid;
  box-sizing: border-box;
}
.container {
  width: 400px;
  display: flex;
  flex-wrap: wrap;
}
.child {
  height: 200px;
}
.child.half {
  flex-basis: 50%;
  color: green;
}
.child:not(.half) {
  flex-basis: 100%;
  color: purple;
}
<div class="container">
  <div class="child half">
    HALF
  </div>

  <div class="child half">
    HALF
  </div>

  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
  <div class="child">
    FULL
  </div>
</div>

The flex sizing properties -- flex-grow, flex-shrink, flex-basis and flex -- work only along the main axis of the flex container.

Since your container is flex-direction: column, the main axis is vertical, and these properties are controlling height, not width.

For sizing flex items horizontally in a column-direction container you'll need the width property.

(Here's a more detailed explanation: What are the differences between flex-basis and width?)

To achieve your layout with a single container, see another answer to this question.

If you want to stay in column-direction, you'll need to wrap the .half elements in their own container.

.container {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.container > div:first-child {
  display: flex;
}
.child.half {
  flex: 1 1 10em;
  color: green;
  width: 50%;
}
.child {
  height: 200px;
  width: 100%;
  border: 1px solid;
}
* {
  box-sizing: border-box;
}
<div class="container">
  <div><!-- nested flex container for half elements -->
    <div class="child half">HALF</div>
    <div class="child half">HALF</div>
  </div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
  <div class="child">FULL</div>
</div>