Reports

@a-haworth's suggestion to use border-box was great, but for reasons I don't quite understand yet, it didn't work on it's own. Instead, I had to switch from using flex: 1 & flex: 3 to get my sizing ratio to instead use flex: 1 1 25% and flex: 1 1 75%. The auto flex basis seems to have been problematic? Not quite sure.

body {
  min-height: 100vh;
  margin: 0;
  
  /* Just for testing */
  width: 760px;
}

.container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 1 1 25%;
  
  /* All Good! */
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  max-width: calc(200px);

  background-color: lightsteelblue;
}

main {
  flex: 1 1 75%;
  
  padding: 0.5rem 1rem;
}

<div class="container">
  <aside class="sidebar">Sidebar Content</aside>
  <main>Main Content</main>
</div>

79687002