[SOLVED] Overflow hidden and parent width transition

Overflow hidden and parent width transition

Here is the fiddle with the best i could achieve regarding my problem: https://jsfiddle.net/langocha/rofyxbhq/

When i hover the yellow box, i want a message to get out by the right side of it and shift the blue box, also on the right.

I'm using a transition but the opening of the message is instantly shifting the blue box (by the width of the message about to be displayed), only then the message starts its width transition ... to fill the space.

I'd like a full progressive transition, and not two steps as it is right now. Any idea?

Tried to play around with width: 0, width: 0px or width: 0% on .slider and .container:hover .slider to get different results but none fixed anything.

Solution

You can’t exactly do what you’re going for with flexbox, but you can with grid. The trick is that you can transition fr units.

In your case, you have to make sure .container’s flex-shrink and flex-grow properties are set correctly, but I think this is what you’re going for.

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>

ETA: in the future you’ll be able to do this with calc-size().