I am faced with a challenge involving two child elements of fixed size:
<div class="parent">
<div class="static_child">
</div>
<div class="static_child">
</div>
</div>
.parent {
border: 1px solid black;
display: flex;
flex-direction: column;
}
.static_child {
border: 1px solid red;
width: 600px;
height: 200px;
}
My goal is to make these child elements responsive in order to fill the screen without altering their fixed dimensions.
It is crucial that both child elements are visible on the screen, scaling down when necessary. They should also expand appropriately when viewed on larger screens.