Javascript 如何在左侧打开（展开）块元素？

假设我有两个块元素，它们有固定的位置，在窗口中看起来像这样：

--------------
|        xxx |
|        xxx |
|            |
|        xxx |
|        xxx |
|            |
--------------

我希望元素在悬停时向左展开，如下所示：

--------------
|        xxx |
|        xxx |
|            |
|     xxxxxx |
|     xxxxxx |
|            |
--------------

然而，现在它扩展到了右边。工作示例如下所示：

---

任何解决方案都将不胜感激。

使用

display:flex；弯曲方向：立柱；对齐项目：柔性端”，并将元素向右对齐


$（“.container”）。每个（函数（）{
$（this）.hover（函数（）{
$（this.toggleClass（“show”）；
})
})
#包装器{
位置：固定；
右：1em；
显示器：flex；
弯曲方向：立柱；
对齐项目：柔性端；
}
.集装箱{
宽度：2米；
高度：2米；
背景：黄色；
利润率：1米0；
}
.container.show{
宽度：4em；
高度：2米；
}
使用
显示：flex；弯曲方向：立柱；对齐项目：柔性端”，并将元素向右对齐


$（“.container”）。每个（函数（）{
$（this）.hover（函数（）{
$（this.toggleClass（“show”）；
})
})
#包装器{
位置：固定；
右：1em；
显示器：flex；
弯曲方向：立柱；
对齐项目：柔性端；
}
.集装箱{
宽度：2米；
高度：2米；
背景：黄色；
利润率：1米0；
}
.container.show{
宽度：4em；
高度：2米；
}
只需将此添加到
.container
：

  float: right;
  clear: both;

更新的代码片段：
只需将其添加到
.container
：

  float: right;
  clear: both;

更新的代码段：
顺便说一句，您不需要js在悬停时展开它。只需使用pseudo
：悬停
css-selector@Stalinko是的，我知道，只是在我的原始代码中，我需要在悬停时做其他需要js的事情：）顺便说一句，在悬停时不需要js来扩展它。只需使用pseudo
：悬停
css-selector@Stalinko是的，我知道，只是在我的原始代码中，我需要在悬停时做其他需要js的事情：）