How to set a maximum width of 100% within nested flexboxes?

Question

I'm almost sure this question has already been asked and solved but despite a thorough research I wasn't able to find any answer solving my specific case, hence my actual question.

I would like the table contained within the .card div to be overflowed but despite multiple attempts I didn't find a way for my flex boxes to take into account the max-width: 100% CSS property attached to this .card div (that should normally limit its width to 100% related on its parent width). It's like the table width take precedence over all the parent widths.

Here is a reproducible version of my last failed attempt:

body, html {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
}

* {
  box-sizing: border-box;
}

.menu {
  background-color: lightblue;
  flex-grow: 1;
  min-width: 10rem;
  padding: 1rem;
}
 
.main {
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1rem;
}

.card {
  background-color: white;
  max-width: 100%;
}

.table {
  overflow: auto;
}

<div class="menu">
  <p>.menu</p>
 </div>

<div class="main">
  <p>.main</p>
  
  <div class="card">
    <p>.card</p>
    
    <table class="table">
      <tr>
        <td>Lorem</td><td>ipsum</td><td>dolor</td><td>sit</td><td>amet</td><td>consectetur</td><td>adipiscing</td><td>elit</td><td>sed</td><td>do</td><td>tempor</td><td>incididunt</td><td>ut</td><td>labore</td><td>et</td><td>dolore</td><td>magna</td><td>aliqua</td>
      </tr>
    </table>
  </div>
</div>