Overflow hidden and parent width transition

Question

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.

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon.. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn't work can I just paste a link. — Paulie_D
– Paulie_D, Commented Sep 19, 2024 at 17:54

Noleli · Accepted Answer · 2024-09-19 17:44:24Z

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

Collectives™ on Stack Overflow

Overflow hidden and parent width transition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related