其他两个移动div之间的响应div宽度

Question

有没有一种使用CSS的方法来使黑色div的宽度随其之间的蓝色/绿色div的移动而变化，因此它永远不会超出两个外部div之间的空间范围？我意识到有使用JavaScript和数学的方法，但是我想知道是否有使用CSS的更简单方法。

        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var gap = document.getElementById('gap');
        var gapRect = gap.getBoundingClientRect();
        
        
        
    function myFunct() {
        one.style.transform = 'translateX(200%)';
        two.style.transform = 'translateX(-400%)';
    }    
        
    function myFunct2() {
        one.style.transform = 'translateX(800%)';
        two.style.transform = 'translateX(-900%)';
    }
    

        #line {
            display:flex;
            height:100px;
            width:90%;
            border:1px solid red;
            margin:auto;
            margin-top:25px;
        }
        
        #line div {
            position: relative;
            transition-duration: 1s;
        }
        
        #one {
            width:50px;
            margin-left:50px;
            height:100%;
            background-color: blue;
        }
        
        #two {
            width:50px;
            height:100%;
            background-color:green;
            margin-left:auto;
        }
     
        #gap {
            width:100%;
            height:50%;
            align-self: center;
            background-color: black;
        }

<button onclick='myFunct()'>PRESS</button>
<button onclick='myFunct2()'>PRESS</button>
    
<div id='line'>
    <div id='one'></div>
    <div id='gap'></div>
    <div id='two'></div>