Sizing div within flexbox - html

Question

I'm trying to size a div according to the page and column size. The div must always be a square, regardless of its width. What I mean by that is:
When it's set in a row, it takes up the amount of space it's allocated. In this case, the text took 50% of the space. The remaining 50% must be taken up by the square div.
When it's set to a column (stacked on smaller screens), it takes up the amount of space it's allocated. In this case, the square div is the full width of the screen.
div.layout-1-img{
flex: 1;
background-color: gray;
width: 5em;
height:5em;
}
Jsfiddle

Answer 1

From what I understand:
you have a div that will contain the text you want, but this div width and height change.
You want the outerdiv to always be a SQUARE regardless of the page width, but still have the text div inside.
Possible Solution:
Create an outer div:
.outerDiv{
display: block;
position: absolute;
background-color: gray;
padding: 10px; // Specify the padding value if you want
}
Then using jquery:
$(document).ready(function(){
//Get the text div height and width
var height = $('#textdiv').height();
var width = $('#textdiv').width();
// increase the size of height or width by
// How much taller you want the back to be compared to text div.
//In this example I'm increasing the background by a factor of 2
height = height *2;
width = width *2;
//Compare to see which one is largest.
// Then change css of background to correspond to the correct size
if(height>width){
$('.outerDiv').height(height);
$('.outerDiv').width(height);
}else{
$('.outerDiv').height(width);
$('.outerDiv').width(width);
}
});