I am working with a parent div that contains 5 child divs. The parent div does not fill the entire width of the window, but the 5 children share the same space and properly fill their parent.
<div class="parent">
<div class="child" style="background-color:red" >child 01</div>
<div class="child" style="background-color:blue">child 02</div>
<div class="child" style="background-color:yellow">child
03</div>
<div class="child" style="background-color:grey">child 04</div>
<div class="child" style="background-color:green">child05</div>
</div>
However, when I set the width of the container of the parent div to 90vw, the parent div scales but the child divs remain the same size. Shouldn't the child divs automatically scale with their parent? How can I achieve this?
This is my CSS code:
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.parent {
display: flex;
width: 90vw;
}