problem with HTML

Question

I’m having trouble rendering this HTML, I’m using Jango and this is the template that you get from Viewer, when trying to use this new format of cards I’m having problems, I want it to be a fixed box that only scrolls when the person goes over it. Everything happens as planned, but there is always a card at the beginning that gets cut only this is disturbing. this is the HTML:

<div class="container">
  <div class = "caixa"style="overflow-x: auto">
    <div class=" conteudo"><br><br><br><br><br><br>
     {%for os in os%}
    <div class="card ">
      <h6 class="card-header">servico: {{os.servico}}</h6>
      <div class="card-body">
        <p class="card-text">servico: {{os.servico}}</p>
        <p class="card-text">Referencia: {{os.referencia}}</p>
        <p class="card-text">Cidade: {{os.cidade}}</p>
        <p class="card-text">Data do Pedido: {{os.dtpedido}}</p>
      </div>
    </div>
    {%endfor%}

  </div>

  </div>

  </div>

this is the CSS:

.conteudo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
  margin-top: 180px;
  background-color: blue;
}
.cardy {
  background-color: red;
  min-width: 300px;
  margin: 2px;

  /*text-align: center;*/
}
.caixa {
  background-color: red;
  width: 300;

}

Answer 1

I was able to solve by doing tests and analyzing so the HTML was:

<div class="container">
  <div class = "caixa"style="overflow-x: auto">
    <div class=" conteudo">
     {%for os in os%}
    <div class="card ">
      <h6 class="card-header">servico: {{os.servico}}</h6>
      <div class="card-body">
        <p class="card-text">servico: {{os.servico}}</p>
        <p class="card-text">Referencia: {{os.referencia}}</p>
        <p class="card-text">Cidade: {{os.cidade}}</p>
        <p class="card-text">Data do Pedido: {{os.dtpedido}}</p>
      </div>
    </div>
    {%endfor%}

  </div>

  </div>

  </div>

and the CSS:

.conteudo {
  /*display: flex;*/
  flex-direction: column;
  /*justify-content: center;*/
  /*align-items: center;*/
  width: 100%;
  height: 300px;
  background-color: blue;
}
.cardy {
  background-color: red;
  min-width: 300px;
  margin: 2px;

  /*text-align: center;*/
}
.caixa {
  background-color: red;
  width: 300;

}

This is as I wanted, Thanks to those who read and I hope it helps if anyone needs