Why doesn't my divs take up 100% of the #area size?

Question

Hello I want to insert my divs inside of #area but it doesnt work out.

#area {
  width: 400px;
  height: 400px;
  display: flex;
  border: 1px solid red;
}

#area div { flex: 1; }

#exde { background-color: chocolate; }
#right { background-color: aqua; }

<form action="http://www.google.lt" method="get">
  <div id="area">
    <div>
      <label for="exde">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea>
    </div>
    <div>
      <label for="right">This is your text</label><br>
      <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea>
    </div>
  </div>
</form>

So if someone could help me fill each of them to take half of the #area with chocolate color and the other half with blue I would be thankful.

Answer 1

They do:

 #area {width:400px; height:400px; display:flex; border: 1px solid red;} #area div { flex:1; border: 2px solid green; } #exde {background-color:chocolate;} #right {background-color:aqua;} 

 <form action="http://www.google.lt" method="get"> <div id="area"> <div><label for="exde">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea></div> <div><label for="right">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea></div> </div> </form> 

The textarea 's don't, so you might want to change their sizes.

For example, you might want to add this to your css :

#exde, #right {
     min-width: 100%;
     max-width: 100%;
     box-sizing: border-box;
}

Answer 2

 #area { width: 400px; height: 400px; display: flex; border: 1px solid red; } #area div { flex: 1; } #exde { background-color: chocolate; width:100%;box-sizing: border-box;} #right { background-color: aqua; width:100%;box-sizing: border-box;} 

 <form action="http://www.google.lt" method="get"> <div id="area"> <div> <label for="exde">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="exde"></textarea> </div> <div> <label for="right">This is your text</label><br> <textarea name="tekstarea" rows="19" cols="10" id="right"></textarea> </div> </div> </form> 

Here is a simple solution of your problem, add width 100% and box-sizing to both divs like that:

#exde {background-color:chocolate;width:100%;box-sizing: border-box;}
#right {background-color:aqua;width 100%;box-sizing: border-box;}

The box-sizing property defines how the width and height of an element are calculated.