CSS columns - expand one element without rearranging

Asked Dec 30 '17 at 14:02

Active Oct 14 '19 at 12:33

Viewed 841 times

I couldn't find an identical scenario anywhere, I've wasted inordinate hours on this already.

I'm trying to achieve a normal webkit column where the elements are clickable/expandable in the y-direction.

I drew this picture to explain what I mean:

The issue is that when I expand one element, the column elements are rearranged so that all the columns become the same height again, which messes up the entire view.

Has anyone come accross this problem before? I'm trying to get through this without leaning on jquery since this is a React.js application and I'm trying not to mix the two.

CSS:

.in-columns-small {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
.in-columns-small div {
 -webkit-column-break-inside: avoid;
 page-break-inside: avoid;
 break-inside: avoid;
}

where in-columns-small is the bigger square containing the divs

edited Oct 14 '19 at 12:33

asked Dec 30 '17 at 14:02

marcs

and where is your code ? – Temani Afif Dec 30 '17 at 14:46
@Zuzuman use `flexbox` . – Mehraj Khan Jan 01 '18 at 06:07
I have this exact scenario in a React app...did you ever solve it?? – Jamie Nov 29 '18 at 09:43
1

@Jamie I did not, seemingly the only solution is to manage a number of inline-block
columns with %-width.
– marcs Nov 30 '18 at 12:40
@Zuzuman I did think about it after and it does make sense why this happens. My scenario was a custom drop down inside the box, so now it’s just positioned absolutely and it overflows, fixed! – Jamie Nov 30 '18 at 13:31

CSS columns - expand one element without rearranging

0 Answers0

Linked