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">
      card 1231231
    </div>
    <div class="card">
      card 2 hello world
    </div>
    <div class="card">
      card 3 some some som
    </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;
}