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

问题

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.

回答1:

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;      
}

来源：https://stackoverflow.com/questions/64561454/opening-mat-expansion-panel-is-moving-the-opposite-column-how-to-keep-it-still