I have two questions regarding flexboxes but I am unable to find the answers.
How can I create 4 boxes with equal width and height, without using the viewport? For instance, if I create a box with 50% width, I want the height to be equal to the width. All other boxes should have the same properties.
If I have these boxes, how do I insert divs inside one of them that takes 20% height and the full width of the box without extending it?
Here is my code so far:
.flex-container {
float: none;
width: 50%;
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item {
width: 50%;
color: white;
}
.flex1 {
background-color: green;
float: left;
}
.flex2 {
background-color: red;
float: right;
}
.flex3 {
background-color: purple;
float: left;
}
.flex4 {
background-color: orange;
float: right;
}
.inlineBox {
width: 100%;
height: 20%;
background-color: yellow;
}<ul class="flex-container">
<li class="flex-item flex1">these boxes need to have the same height and width, and they must be responsive without using a viewpoint</li>
<li class="flex-item flex2">2</li>
<li class="flex-item flex3">3</li>
<li class="flex-item flex4">4</li>
</ul>
<br>
<br>
<br>
The yellow boxes need to occupy 100% width and 20% height inside the flex box<br>
<ul class="flex-container">
<li class="flex-item flex1">
<div class="inlineBox"> </div>
<div class="inlineBox"> </div>
<div class="inlineBox"> </div>
</li>
<li class="flex-item flex2">2</li>
<li class="flex-item flex3">3</li>
<li class="flex-item flex4">4</li>
</ul>