Overflow Left

A DIV that is "overflowing" to the left.

HTML

<div class="outer-div">
  <div class="inner-div">     
    <div class="part1">
    This is part 1 -
    </div>  
    <div class="part2">
    This is part 2 -
    </div>  
    <div class="part3">
     This is part 3 -
    </div>  
    <div class="part4">
    This is part 4 
    </div>
  </div>
</div>

CSS

.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-flow: row nowrap;
}

.part1,
.part2,
.part3,
.part4 {
  white-space:nowrap;
  flex-grow: 1;
}

.part1 {
  background-color:red;
}
.part2 {
  background-color:blue;
}
.part3 {
  background-color:green;
}
.part4 {
  background-color:yellow;
}

JavaScript

const onResizeOrDetectChange = () => {
    const outerDiv = document.querySelector('.outer-div');
    const innerDiv = document.querySelector('.inner-div');
    const widthDiff = outerDiv.offsetWidth - innerDiv.offsetWidth;
    console.log(widthDiff < 0, widthDiff, innerDiv.style.left)

    // will be less than 0 when outer div width is less than inner div width
    if (widthDiff < 0) {
        innerDiv.style.left = widthDiff + 'px';
    } else {
        innerDiv.style.left = 0;
    }
}

window.addEventListener('resize', onResizeOrDetectChange, false);