溢出隐藏和父宽度过渡

Question

这是我能就我的问题实现的最好的小提琴：https://jsfiddle.net/langocha/rofyxbhq/

当我将鼠标悬停在黄色框上时，我希望在其右侧显示一条消息，并移动也在右侧的蓝色框。

我正在使用过渡，但消息的打开会立即移动蓝色框（按要显示的消息的宽度），然后消息才开始其宽度过渡...以填充空间。

我想要一个完整的渐进式过渡，而不是像现在这样分两步。有什么想法吗？

尝试在

width: 0, width: 0px or width: 0% 

和

.slider

上使用

.container:hover .slider

来获得不同的结果，但没有解决任何问题。

Answer 1

你无法使用 Flexbox 完全实现你想要的功能，但使用 grid 可以。诀窍是您可以转换

fr

单位。

在您的情况下，您必须确保

.container

的

flex-shrink

和

flex-grow

属性设置正确，但我认为这就是您想要的。

body {
    display: flex;
    flex-direction: row;
    margin: 0px;
    padding: 0px;
  font-size: 30px;
}

.container, .another {
    padding: 15px;
}

.container {
  flex: 0 0 auto;
    display: flex;
    background-color: blue;
}

.label {
    white-space: nowrap;
    background-color: yellow;
}

.slider {
    display: grid;
  grid-template-columns: 0fr;
    transition: grid-template-columns 0.2s;
}

.container:hover .slider {
    grid-template-columns: 1fr;
}

.inner {
    background-color: red;
    white-space: nowrap;
    overflow: hidden;
}

.another {
    white-space: nowrap;
  background-color: lightblue;
}

<div class="container">
    <span class="label">Box</span>
    <span class="slider"><div class="inner">Slider text which can be of any size (single line)</div></span>
</div>
<div class="another">Just another box</div>