动画div屏幕右侧

Question

使用以下HTML：

<div id="container" style="width: 100%; overflow-x: hidden;">
  <div id="left" style="width: 50%; display: inline-block;">
  </div>
  <div id="right" style="width: 50%; display: inline-block;">
  </div>
</div>

我想将左边的div设置为宽度：100％，然后右边的div向右滑动。

我认为overflow-x：hidden会起作用，但是当div的div达到51％时，右边的div会立即下降到左边的div之下。

有什么想法吗？

Answer 1

使用display: flex inparent div并设置flex: 0 0 auto以避免浏览器尝试将子项放在父项中

#container {
  width: 100%;
    overflow-x: hidden;
    display: flex;
}
#left {
  background-color: blue;
  height: 100px;
  width: 62%;
    flex: 0 0 auto;
}
#right {
  background-color: red;
  
  height: 100px;
  width:50%;
    flex: 0 0 auto;
}

<div id="container" >
  <div id="left" > </div>
  <div id="right" > </div>
</div>