设置div最大宽度， 当宽度大于最大宽度时，则填充margin,可以用纯css实现吗？

Question

如图，蓝色div默认宽度为百分百， 当红色宽度大于某个临界值（比如红色大于500px）时，则填充红色div的padding，从而使蓝色宽度保持不变， 可以用css来实现吗？

<div id="a1">
    <div id="a2">
        
    </div>
</div>

#a1{
    width: 300px;
    border: 1px solid red;
    height: 20px;
    padding: 0 10px;
    box-sizing: border-box;
}

#a2{
    width: 100%;
    border: 1px solid blue;
    height: 10px;
}

Answer 1

#a1{
    width: 600px;
    border: 1px solid red;
    height: 20px;
    box-sizing: border-box;
}

#a2{
    width: 100%;
    max-width: 500px;
    border: 1px solid blue;
    height: 10px;
    margin: 0 auto;
}

Answer 2

实时设置css做不到或者说没意义。

但是，

你可以媒体查询啊