通过translate-x在孩子不在屏幕上时重新调整父级

Question

如果我有这样的html

<div class="root">
  <div class="leftBar">
    <div class="leftBarChildren>
        ...
    </div>
  </div>
</div>

和一些这样的CSS

.root {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.leftBar {
  position: relative;
  width: auto;
  height: 100%;
}

.leftBarChildren {
  position: relative;
  translate-x: -100px;
}

如果我有一些JavaScript可以更改translate-x元素的.leftBarChildren值，那么如何使width元素的.leftBar为0 .leftBarChildren元素不在屏幕上，并且仅在使用CSS的情况下在屏幕上适当增长。