I am working with a flexbox containing 5 direct children. My goal is to scale the first and last column (.colonnade__column) to zero instead of using display: none. When I achieved this, the content scales as expected but still keeps the space reserved, causing the next/previous element not to move.
I experimented with sizing the child elements of the columns and making the columns themselves more flexible, but unfortunately, I hit dead ends...
HTML
<div class="colonnade">
<aside class="sidebar colonnade__column alpha">
<div class="">
NAVI
</div>
</aside>
<label class="colonnade__trigger alpha" for="colonnade-alpha">
<span class="label">
Show Navigation
</span>
</label>
<main class="main" id="main">
</main>
<aside class="sidebar colonnade__column omega">
<div class="">
CART
</div>
</aside>
<label class="colonnade__trigger omega" for="colonnade-omega">
<span class="label">
Show Cart
</span>
</label>
</div>
CSS
.colonnade {
display: flex;
}
.colonnade__column {
padding: 1em;
width: 20%;
min-width: 16em;
max-width: 20em;
/*display: none;*/
transform: scaleX(0);
transition: transform .3s;
background: #ccc;
}
.colonnade__column.alpha {
transform-origin: 0 0;
}
.colonnade__column.omega {
transform-origin: 100% 0;
}
.colonnade__state.alpha:checked ~ .colonnade__column.alpha,
.colonnade__state.omega:checked ~ .colonnade__column.omega {
/*display: block;*/
transform: scaleX(1);
}
You can see the behavior in action on this CodePen link. It is triggered by the light grey areas with vertical text.