Opening mat-expansion panel is moving the opposite column, how to keep it still?

Question

In my project I have two columns, each with their own mat-accordion which holds some mat-expansion panels.

When I click to open any one of the expansion panels, it is moving the opposite column downwards.

Here is the CSS. Basically, the "row" holds the two columns, which hold the accordions.

.row {
    padding-top: 120px;
    padding-left: 25px;
    padding-right: 25px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
}

.column {
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 50%;
    flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
    max-width: 50%;
  
}

.mat-expansion-panel {
    background: rgba(0, 0, 0, 0.7);
    width: px;
    margin-bottom: 1.5rem;
}

.mat-expansion-panel-header {
    height: 150px;
    font-family: Gotham HTF;
    font-size: 26px;
    justify-content: space-between;
    text-align: center;
}

I would like the opposite column to be held in place if it is not being clicked.

Is there a way to keep the opposite column held in place so that only the column with the mat-expansion panel that was clicked is moving? If there is no such way, is there a way to replicate a mat-expansion panel using mat-card with header and content? I need everything to stay still.

Can you share your Template and Stylesheet. I'm guessing your content get align to the center when it's container grows. You could position absolut or align to top. — Andres Abadia
@AndresAbadia I updated the question for you, could you take a second look? — bensalerno

Andres Abadia Andres Abadia · Accepted Answer · 2020-10-27T20:52:16

Just like I guessed. You're row content is being align to the center. Change the align-items to for example flex-start to align the row content to the top of the row.

.row {
    ...
    align-items: flex-start;      
}

Opening mat-expansion panel is moving the opposite column, how to keep it still?

1 Answers