CSS flexbox 溢出 100% 宽度的元素

Question

鼠标悬停时，我想按照下图变换两个相邻的弹性元素的位置

标记如下

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

我希望两个元素都是父元素的 100% 宽度，并且第二个元素溢出，这样我就可以在鼠标悬停时转换 X。我遇到的问题是两个元素都被挤进了容器。

我知道我可以将这两个元素包装在另一个 div 中，并给它 200% 的容器宽度。但是想知道这是否可以用 flexbox

来完成

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;
                                 */
}

.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>

您写道：

The problem I'm having is both elements get squeezed in to the container.

这可能是因为弹性项目默认设置为 flex-shrink: 1，这意味着它们可以收缩以适应容器。在我的回答中 flex-shrink 设置为 0.

CSS flexbox 溢出 100% 宽度的元素

CSS flexbox overflow 100% width elements

html

css

overflow

flexbox