I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns.
Below is my current HTML:
item1 item2 item3 ...<mat-card class="hover tag" fxFlex ngxDraggable>item20</mat-card>Here is my SCSS:
.board{
background-color: #f5f5f5;
}
.board-header{
background-color: #f5f5f5;
border-bottom: rgba(0,0,0,.87);
}
.tag{
transition: box-shadow 280ms cubic-bezier(.4,0,.2,1) !important;
padding: 10px !important;
border-radius: 10px !important;
max-width: fit-content !important;
margin: 10px !important;
max-height: fit-content !important;
}
Current output looks like this:
| |
| |item1| |item2| |item3| |item4| |
| |
Expected output should be:
| |
| |item1| |item2| |item3| |item4| |
| |item5| |item6| |item7| |item20||