I'm facing an issue with flexbox and its unusual behavior. I have set up flexbox for the parent element and used flex: 1 1 100%, but it's not working as expected. When I checked in Firefox Developer Tools, it says that the parent is not a flex container and suggests adding display: flex to the parent.
#dragable_container {
display: flex;
height: 20rem;
background-color: red;
}
.box {
flex: 1 1 100%;
min-width: 20rem;
min-height: 20rem;
background-color: hsl(157, 90%, 35%);
position: absolute;
}<section>
<div id="dragable_container">
<div class="box" id="dragable"></div>
</div>
</section>