Estou fazendo um grupo de cartões, e quando a tela é grande eles ficam normais, mas quando eu diminuo eles ficam pequenos. Queria criar uma barra de rolagem para que quando fosse em telas menores, o tamanho dos cards ficassem o mesmo, porém com a barra de rolagem. Eu tentei utilizando o overflow-x
para tentar ficar responsiva, porém não obtive sucesso. No caso eu quero uma barra de rolagem horizontal.
Meu código:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
<meta charset="utf-8">
<style type="text/css">
.conteudo{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
.card{
background-color: #f1f1f1;
width: 250px;
margin: 10px;
height: 200px;
text-align: center;
}
}
</style>
</head>
<body>
<div style="overflow-x: auto">
<div class="conteudo">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
</div>
</body>