CSS弹性盒子溢出100％宽度元素

Question

当鼠标悬停时，我希望根据下面的图片，转换两个相邻的flex元素的位置。

标记如下。

<div class="container">
  <div class="element">Normal</div>
  <div class="element">Hover</div>
</div>

我希望两个元素都能够占用父容器的100％宽度，第二个元素溢出以便我可以在鼠标悬停时进行X轴转换。但是问题在于两个元素都被挤入了容器中。

我知道我可以将这两个元素包装在另一个div中，并使其具有200％的容器宽度。但是想知道是否可以使用flexbox完成此操作。

- ibex

Answer 1

.container {
  display: flex;
  width: 200px;
  overflow: hidden;           /* hides the flex item parked outside the container */
  cursor: pointer;
  border: 1px solid black;
}

.element {
  height: 100px;
  flex: 0 0 100%;            /* can't grow, can't shrink, fixed an 100% width */
  transition: .5s;
  min-width: 0;              /* override min-width: auto default;
                                https://dev59.com/mVoV5IYBdhLWcg3wc-Ym */
}

.container:hover > .element:first-child {
  flex-basis: 0;
}

.element:first-child { background-color: lightgreen; }
.element:last-child  { background-color: orange; }

<div class="container">
  <div class="element">Normal</div>
  <div class="element">Hover</div>
</div>

您写道： “我遇到的问题是两个元素都挤在了容器里。” 这可能是因为默认情况下，flex项目被设置为“flex-shrink: 1”，这意味着它们可以缩小以适应容器。在我的答案中，flex-shrink设置为0。

- Michael Benjamin

---

我错过的是flex: 0 0 100%;，你的评论完美地解释了原因。我已经修改了代码以符合我想要的转换方式。此外，在这种情况下，min-width:0;是我从未听说过的东西。我一直在想如何使元素缩小到其内容以下。为什么你在元素上有height: 100px;？为什么高度和宽度不能都在容器上？ - ibex

通常情况下，高度/宽度是基于项目的，除非它们应该受到某种限制，当然，容器的高度/宽度都可以设置。 - Asons

Michael_B，使用 transform: translate 会表现更好，不会挤压第一个子元素 并且 在IE中也可以正常工作 :) ... https://jsfiddle.net/o2bx6bf9/ - Asons

项目上的 height: 100px 只是为了演示目的。 如 @LGSon 所述，在 flex 布局中，项目通常会接收大小调整。 但是，再次强调，这只是一个简单的演示。 如果您想要，请使用容器来设置尺寸。 - Michael Benjamin

@LGSon，好的修订。我已经在Edge中测试了我的答案（它可以工作），但是没有在IE11中测试（现在我发现它不能工作）。谢谢。 - Michael Benjamin