Orbit.resize()

Orbit provides a Orbit JS class with resize() method to allow .gravity-spot to adapt its size to a parent element. See installation doc section

Note

Currently resize() only works on initial .gravity-spot. Does not affect child gravity-spots.

<div class="wrapper"> <div class="bigbang"> <div class="gravity-spot"> <div class="orbit-4"> <div class="satellite"> </div> </div> </div> </div> </div>

.wrapper {
border: 1px dotted var(--o-purple);
height: 200px;
width: 280px;
margin: 5px;
resize: both;
overflow: auto;
}
.orbit, [class*='orbit-']{
  border-color: var(--o-cyan)
}
.satellite {
  border: none;
  background-color: var(--o-cyan)
}

Orbit.resize('.wrapper')

HTML

<div class="wrapper">
    <div class="bigbang">
    <div class="gravity-spot">
        <div class="orbit-4">
        <div class="satellite">
        </div>
        </div>
    </div>
    </div>
</div>

CSS

.wrapper {
border: 1px dotted var(--o-purple);
height: 200px;
width: 280px;
margin: 5px;
resize: both;
overflow: auto;
}
.orbit, [class*='orbit-']{
  border-color: var(--o-cyan)
}
.satellite {
  border: none;
  background-color: var(--o-cyan)
}

JS

Orbit.resize('.wrapper')