css - flexbox inheriting parent width despite align-items: flex-start, justify-content: flex-start

Question

Wanted behavior: I would like the .container div to adjust to the width of the .chapers div which should adjust to the width of the .chapter-link divs. Both the .container and .btn divs should have the current height of the viewport (100vh).

Following this question I added justify-content and align-items : flex-start to the container, but the problem remains.

.container {
  background-color: blue;
  color: #fff;
  font-size: 16px;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.chapters {
  padding: 14px;
}

.btn {
  background-color: green;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapter-link {
  margin-bottom: .5em;
    max-width: 200px; 
}

<div class='container'>
  <div class='chapters'>
    <div class='chapter-link'>Test title</div>
    <div class='chapter-link'>Test title</div>
    <div class='chapter-link'>Test title</div>
    <div class='chapter-link'>Test title</div>
  </div>
  <div class='btn'>&lt;</div>
</div>