How to scroll with 3 Divs

Question

I’m facing a scroll problem

.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>

In this presentation I have 3 divs, where I need the first (red color) to occur scroll-x, the second is where I get my data, and the third is like columns..

But when I use the overflow at first div, the second div does not follow the data.

How do I fix it?

Answer 1

In this particular case do not use display: flex; use display: inline-block his son and grandson white-space: nowrap; to prevent grandchildren from breaking online inside the child.

It seems a bit confusing but in the example below you can see that it works and how the result is.

.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>