CSS / HTML：最小化浏览器时如何使左侧div响应崩溃

Question

So I have a two divs that are partitioning the page body, but I need to collapse the left side div when user minimizes the page. And when it click the collapsed side div, it goes back to previous.

html

<div class="" style="display:flex; min-height:700px;">
        <div class="left_temp_sider">
            DIV1
        </div>
        <div class="right_temp_sider">
            DIV2
        </div>
</div>

css

.left_temp_sider{
   min-width: 300px;
   margin-top:70px;
   padding:20px 0px 20px 35px; 
}
.right_temp_sider{
   flex:1;
}

Answer 1

Try media queries: need to reset min-width instead of max-width

@media screen and (max-width: 600px) {
    .left_temp_sider{
         min-width: 50px;

    }
}

If your viewport width is less than 600px, the CSS rules specified inside @media will be applied.