flex box bug?

Why a width of div.content is less than its content?

by Bacher

HTML

<div class="content">
  <div class="cards">
    <div class="card">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae voluptatibus sed, ut delectus facere dolorum qui quam dicta natus repudiandae aliquam, vero quasi exercitationem dolore tempore quisquam magni. Ab, officia.
    </div>
    <div class="card">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quaerat amet, nihil nobis laborum cum, ab tempora ut qui distinctio, numquam. Nam possimus, perspiciatis quas dolores facere tempora, maxime consequatur!
    </div>
    <div class="card">
      card 3
    </div>
  </div>
</div>

CSS

.content {
  display: flex;
  flex-direction: column;
  align-items: start;
}

.cards {
  display: flex;
  gap: 20px;
  padding: 10px;
  background: red;
}

.card {
  flex-basis: 140px;
  flex-shrink: 0;
  border: 1px solid #000;
}