CODEWITHSUNDEEP
bootstrap-4css-transforms
Eric Soyke
Eric Soyke

Reputation: 1067

CSS Scale transform on child not affecting parent size

I have a component that is too large and I want to shrink it down. I'm able to do so with a scale transform, but the parent container doesn't shrink to fit.

In my real code, the div with the SHRINK-ME class is actually an Angular calendar component, but this simplified repo reproduces the same effect. I can't just scale the wrapping parent div as I need to use the Bootstrap column grid classes to accommodate objects omitted from this example. Am I missing a simple CSS property here?

.parent {
  background-color: green;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}
<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

My code with and without the transform:

.parent {
  background-color: green;
  width: 40%;
}

.parent .child-object {
  height: 10em;
  background-color: red;
}

.sibling {
  background-color: yellow;
}

.SHRINK-ME {
  transform: scale(.80) translate(-12.5%, -12.5%);
}
<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

<br> Don't want to see the green parent div, want it to shrink as child is scaled down..

<div class='row no-gutters'>
  <div class='parent col-vs-12 col-sm-6'>
    <div class='child-object SHRINK-ME'>CHILD</div>
  </div>
  <div class='sibling col-vs-12 col-sm-6'>SIBLING</div>
</div>

Upvotes: 12

Views: 8927

Answers (1)

Eric Soyke
Eric Soyke

Reputation: 1067

I missed a crucial part of CSS transforms: they do not affect Document flow, only the visual representation. Thus the original footprint of the element would remain. I was able to overcome by setting widths on the child and sibling, then manually shifting the sibling over to match the top corner of the child. More work would be needed for it to adjust to small screens.

.parent {
  background-color: green;
}

.parent .child-object {
  width: 10em;
  background-color: red;
}

.sibling {
  color: white;
  width: 20em;
  background-color: blue;
}

.SHRINK-ME {
  transform: scale(.80);
}

.TRANSLATE-ME {
  transform: translate(-5%, 10%);
}
<div class='row'>
  <div class='parent SHRINK-ME'>
    <div class='child-object '>CHILD</div>
  </div>
  <div class='sibling TRANSLATE-ME'>SIBLING</div>
</div>

Upvotes: 10

Related Questions