将 div 设置为右侧屏幕外的动画答案

【问题标题】：Animate div off screen to the right将 div 设置为右侧屏幕外的动画
【发布时间】：2019-04-20 13:09:01
【问题描述】：

使用以下 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 设置为 width: 100% 并让右侧 div 随后向右滑动。

我认为 overflow-x: hidden 会起作用，但是一旦左 div 达到 51%，右 div 就会立即下降到左 div 之下。

有什么想法吗？

【问题讨论】：

标签： jquery html css

【解决方案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>

【讨论】：

以前没用过'flex'。工作一种享受！谢谢。
附言。知道为什么 overflow-x: hidden 没有完成这项工作吗？
@NeilW 实际上问题不在于overflow-x: hidden。我刚刚意识到您可以继续使用display: inline-block，但您还必须将white-space: nowrap 放在#container 上，这样它的孩子才会保持在同一行。检查这个codepen.io/krugtep/pen/zXarwZ