CSS 左右两边始终各占50%

场景

左右两边是两张产品图片，即使右边部分不可见，左边也只占屏幕宽度的50%，不铺满。

思路

右边加一个空的元素，包裹需要控制隐藏或显示的元素。

代码

主要代码：子元素设置flex: 1，且按需显示的元素外层包裹一个固定存在的div。

<div class="root-class">
    <div class="child-class">左边元素</div>
    <div class="child-class">
        <div>右边元素</div>
    </div>
</div>

.root-class {
    display: flex;
}

.child-class {
    flex: 1;
    width: 100%;
}