Form labels not growing to fill flexbox?

Question

I'm trying to make 2 labels that I have, fill up a <div> that has a width of 100%.

These labels are tied to radio buttons that I'm hiding while styling the labels. I'd like each label to fill 100% of the height and 50% of the width of the div they are in but can't seem to get it to work.

I'm also not married to flexbox if there is another way to accomplish this. Apologies but my CSS is not strong.

In the example below I'd see half the box red, half blue when the radio buttons are selected, and no green.

input[type="radio"] {
  position: absolute;
  left: -1000em;
}

input[type=radio]+label:before {
  cursor: pointer;
  background-color: red;
  flex: auto;
}

input[type=radio]:checked+label:before {
  background-color: blue;
}

.radio_container {
  height: 6rem;
  width: 100%;
  background-color: green;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

<div class="radio_container">
  <input type="radio" name="citizenship" placeholder="Citizenship" value="yes" id="citizenship1">
  <label for="citizenship1" value="yes">yes</label>
  <input type="radio" name="citizenship" placeholder="Citizenship" value="no" id="citizenship2">
  <label for="citizenship2" value="no">no</label>
</div>

Answer 1

This will work for you:

Just add:

label{
  flex:1;
}

Rest of the CSS is just fine, I have also added CSS to align your content if you don't want that just remove.

A working sample below for you:

input[type="radio"] {
  position: absolute;
  left: -1000em;
}

input[type=radio]+label:before {
  cursor: pointer;
  background-color: red;
  flex: auto;
}

input[type=radio]:checked+label:before {
  background-color: blue;
}

.radio_container {
  height: 6rem;
  width: 100%;
  background-color: green;
  display: flex;
  flex-direction: row;
  text-align: center;/* To align the content horizontally center*/
  align-items:center;/* To align the content vertically center*/
}
label{
  flex:1;
  display:block;
}

<div class="radio_container">
  <input type="radio" name="citizenship" placeholder="Citizenship" value="yes" id="citizenship1">
  <label for="citizenship1" value="yes">yes</label>
  <input type="radio" name="citizenship" placeholder="Citizenship" value="no" id="citizenship2">
  <label for="citizenship2" value="no">no</label>
</div>

if you want to know more about flexbox then visit this link, Hope this was helpful for you.