理想效果
缩小屏幕尺寸时候，有的内容就是直接隐藏掉了，所以下面模拟这个效果。
左边的粉红色的盒子是固定宽度高度的，右边的绿色的盒子就是flex：1；占用剩余空间。使用的媒体查询就是相当于一个if条件，当达到一定条件时候，display：block隐藏。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { display: flex; } .one { width: 800px; height: 100px; background-color: pink; } .father .two { flex: 1; background-color: green; } @media (max-width: 800px) { .one { display: none; } } </style> </head> <body> <div class="father"> <div class="one"></div> <div class="two">123</div> </div> </body> </html>
