Need Help: Anything we can do with CSS so that 5 columns will fit in Kanban without having to scroll?

Hi Guys,

I am using kanban to display my tasks, My system has 5 states. While kanban only fits 4 states in screen without being able to scroll.

Is it possible to either bring the Scroll to the top instead of bottom or fit 5 states?

I tried using chat got solution for moving the scroll to the top using this

.kanban-board {
    display: flex;
    flex-direction: column-reverse; /* Moves the scroll bar to the top */
}

Nothing really moved to the top

Applying this below CSS

.kanban-column {
    min-width: 15%; /* Adjust the width as needed */
    max-width: 15%; /* Ensure all columns are the same size */
}

Shrinks the whole view.

Thank you in advance for your help.

Regards,
Dilip

You can use the CSS property transform: scaleY(-1) twice. On the parent div and on the child div that is overflowing.

Or you can also use rotateX:

1 Like