In the code and jsfiddle below, flexbox proportions changes with content. I am feeling I do not understand the real purpose of flexbox here. If we are giving flex-grow properties for the proportions we desire, why do the boxes grow with content?
Notice when dataDiv has new span content in it, proportions are broken with the content. You can observe how it is the expected proportions when you delete the span inside dataDiv. Why does this occur?
https://jsfiddle.net/4shaz5oy/
.container { display: flex; flex-flow: row wrap; height: 100vh;}.mapBox { flex: 2; background-color: red;}.controlBox { flex: 1; display: flex; flex-direction: column; background-color: green;}.controlPanel { flex: 1; max-height: 33%; background-color: yellow; padding: 5px; text-align: center;}.dataPanel { flex: 2; max-height: 66%; background-color: blue; padding: 5px;}<div class="container"><div class="mapBox"></div><div class="controlBox"><div class="controlPanel"><div class="buttonDiv"></div><div class="buttonDiv"></div><div class="buttonDiv"></div></div><div class="dataPanel"><div class="dataDiv"><span>yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada</span></div></div></div></div>