How to wrap parent DIV around scaled child DIV

Question

I have a parent div wrapped around a scaled child div. The child div starts off with transform:scale(0,0); & expands to transform:scale(1,1); when a button is clicked.

.content-wrapper {
  display: inline-block;
  background-color: #ddf;
  padding: 10px;
  clear: both;
}

.content {
  padding: 10px;
  background-color: #fff;
  display: flex-block;
  overflow: hidden;
  transform:scale(0,0);
  transform-origin:top; 
  transition:transform 1s ease-out; 

}

.content.open {
  transform:scale(1,1);
}

However the parent div content-wrapper stays at the same size of the child div content - even when the child is "closed".

The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.

JSFiddle of Example

Is it possible to wrap the parent div around the child div when it's "closed" in this example?

score 1 · Answer 1 · 2018-07-05T03:23:13.277

Try this:

.content {

    background-color: #fff;
    overflow: hidden;
    transform:scale(0,0);
    transform-origin:top; 
    transition:transform 1s ease-out;

    display: block;
    padding: 0;
    height: 0; width: 0;
}

.content.open {
    padding: 10px;
    height: auto; width: auto;
    transform: scale(1,1);
}

Edit: Play with this:

.content {
    padding: 0;
    background-color: #fff;
    display: block;
    overflow: hidden;
    transform-origin:top;


    transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
    transform: scale(0,0); max-width: 0; max-height: 0;
}

.content.open {
    padding: 10px;

    transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
    transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}

That's close - unfortunately the outer box jumps, rather than transitions to the new size: http://jsfiddle.net/BaronGrivet/ztxa5kwu/108/ — BaronGrivet, Jul 04 '18 at 23:30

ghostdivider · Answer 2 · 2018-07-04T23:03:18.143

This will be a little challenging because the background color is attached to the content container. I would remove the background color from the main container, then make it a separate div positioned absolute

<div class="content">
    ...
    <div class="content-bg"> //contains your background color

then manipulate that based on your click handler.

I've updated the JSFiddle http://jsfiddle.net/ztxa5kwu/90/

CSS for the new div:

.content-bg{
  position: absolute;
  background-color: #ddf;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  transition: all .5s ease;
  transform-origin: bottom right;
}

Notice the transform-origin: bottom right; to scale the background towards your button. In the JSFiddle, I made the button take on a border the same color as the background, but you could easily edit the size of the new <div class="content-bg"></div> to fit around your button.

Hope that helps, and gets you in the right direction.

Thank you for the answer. I realised I maybe wasn't very clear about the desired behaviour. I need the button to be in the top-left corner & then move out to the top-right as the content expands. — BaronGrivet, Jul 04 '18 at 23:33

BaronGrivet · Answer 3 · 2018-07-05T21:05:25.093

I found this comment on an older question:

This method only partially achieves the desired effect but doesn't actually remove the space. The transformed box acts like a relatively positioned element - the space is taken up no matter how it is scaled. Check out this jsFiddle which takes your first one and just adds some bogus text at the bottom. Note how the text below it doesn't move up when the box height is scaled to zero. – animuson♦ Jul 29 '13 at 20:37

So with that in mind I used the max-height/ max-width hack to get something close to what I was after: http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/

.content {
  padding: 10px;
  background-color: #fff;
  display: flex-block;
  overflow: hidden;
  transform:scale(0,0);
  transform-origin:top; 
  transition:all 1s ease-out; 
  max-width: 0;
  max-height: 0;  
}

.content.open {
  transform:scale(1,1);
  max-width: 500px;
  max-height: 500px;
}

How to wrap parent DIV around scaled child DIV

3 Answers3