estou com problemas para renderizar este HTML, estou usando django e esse é o template que recebe da viewer, ao tentar usar esse novo formato de cards estou tendo problemas, quero que fique uma caixa fixa que só role quando a pessoa passar por cima dela. Tudo acontece conforme o planejado, mas sempre fica um card no inicio que fica cortado somente isso esta atrapalhando. esse é o 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>
esse é o 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;
}