Sample page showing how divs can be laid out automatically by an outer "flexible container" box

The boxes to the left were made with the html code below (notice NOT float instructions):
 
<div id="box1a" style="
          width:200px;
          height:500px;
          background-color: pink;
">Box 1</div><!-- close box1 -->
 
<div id="box2a" style="
          width:200px;
          height:500px;
          background-color: yellow;
">Box 2</div><!-- close box2 -->
 
<div id="box3a" style="width:200px;
          height:500px;
          background-color: magenta;
">Box 3</div> <!-- close box3 -->

Box 1

Box 2

Box 3

The stacked boxes below were made with the following html code (notice the flex-grow properties and the outer container's display:flex):
 

<div id="container"style="display:flex;">

	<div id="boxb1" style="
           
	width:200px; 
           
	height:500px; 
           
	float:left;
           
	background-color: pink;

	">Box 1</div><!-- close box1 -->
 


	<div id="box2b" style="
           
	width:200px; 
           
	height:500px; 
           
	float:left;
           
	background-color: yellow;

	">Box 2</div><!-- close box2 -->
 


	<div id="box3b" style="
           
	width:30%; flex-grow: 1; 
           
	height:500px; 
           
	float:left;
           
	background-color: magenta;

	">Box 3</div><!-- close box3 -->
</div>