`display: flex;` doesn't work in <fieldset>

by Guillaume Seguin

HTML

<article class="column">
  <header>Header</header>
  <form class="form">
    <div class="top">
      <div class="title">Title</div>
      <fieldset class="fields">
        <div class="field">Field 1</div>
        <div class="field">Field 2</div>
      </fieldset>
      <div class="button">Button</div>
    </div>
    <div class="actions">Action 1</div>
  </form>
  <footer>Footer</footer>
</article>

SCSS

.column {
  background-color: lightpink;
  height: 20rem;
  
  display: flex;
  flex-direction: column;
  
  & header {
    background-color: lightcoral;
  }
  
  & .form {
    background-color: lightsalmon;
  
    display: flex;
    flex-direction: column;
    
    flex-grow: 2;
    justify-content: center;
  
    & .top {
      background-color: lightblue;
  
      display: flex;
      flex-direction: column;
    
      flex-grow: 2;
      justify-content: center;
  
      & .title {
        background-color: lightsalmon;
      }
  
      & .fields {
        background-color: lightpink;
  
        display: flex;
        flex-direction: column;
    
        flex-grow: 2;
        justify-content: center;
      }
  
      & .button {
        background-color: lightyellow;
      }
    }
  
    & .actions {
      background-color: white;
    }
  }
  
  & footer {
    background-color: lightyellow;
  }
}