4

Estou enfrentando um problema de scroll

.div-pai
{
    margin: 30px;
    background-color: red;
    width: 300px;
    height: 300px;
    padding: 3px;
    overflow: auto;
}

.linha
{
    padding: 5px;
    background-color: yellow;
    display: flex;
} 
 
.dados
{
    margin: 5px;
    background-color: black;
    color: white;
}
<div class="div-pai">
        <div class="linha">
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
        </div>
    </div>

Nessa apresentação eu tenho 3 divs, aonde eu preciso que a primeira (cor vermelha) ocorra scroll-x, a segunda é aonde eu recebo meus dados, e a terceira são como se fossem colunas..

Porém quando eu uso o overflow na primeira div, a segunda div não acompanha os dados.

Como eu resolvo isso?

1 Resposta 1

5

Nesse caso em particular não use display: flex; use display: inline-block no filho e no neto junto de white-space: nowrap; para evitar que os netos quebrem em linha dentro do filho.

inserir a descrição da imagem aqui

Parece meio confuso mas no exemplo abaixo vc pode ver que funciona e como fica o resultado.

.div-pai
{
    margin: 30px;
    background-color: red;
    width: 300px;
    height: 300px;
    padding: 3px;
    overflow: auto;
}

.linha
{
    padding: 5px;
    background-color: yellow;
    white-space: nowrap;
    display: inline-block;
} 
 
.dados
{
    margin: 5px;
    background-color: black;
    color: white;
    display: inline-block;
}
<div class="div-pai">
        <div class="linha">
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
            <div class="dados">teste</div>
        </div>
    </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .