overflow-x: scroll Não funciona

Bom dia,

estou com um problema, tenho uma div que se chama container-blog e ela engloba uma parte do meu site sobre blogs

HTML:

<div class="container-blog display-flex-collumn">
        <h1 class="title-blog">Últimas novidades do eSocial</h1>

        <div class="container-box-noticias display-flex">
            <div class="box-noticias display-flex-collumn">
                <img src="" class="img-noticias img1">

                <h1 class="title-noticias title1"></h1>

                <p class="text-noticias p1"><span>...</span></p>

                <a href="#" class="link-noticias link1">LEIA MAIS></a>

                <div class="box-autor display-flex">
                    <img src"" class="img-autor">
                    <p class="name-autor">Diego Pinheiro</p>
                </div>
            </div>

            <div class="box-noticias display-flex-collumn">
                <img src="" class="img-noticias img2">

                <h1 class="title-noticias title2"></h1>

                <p class="text-noticias p2"></p>

                <a href="#" class="link-noticias link2">LEIA MAIS></a>

                <div class="box-autor display-flex">
                    <img src"" class="img-autor">
                    <p class="name-autor">Diego Pinheiro</p>
                </div>
            </div>

            <div class="box-noticias display-flex-collumn">
                <img src="" class="img-noticias img3">

                <h1 class="title-noticias title3"></h1>

                <p class="text-noticias p3"></p>

                <a href="#" class="link-noticias link3">LEIA MAIS></a>

                <div class="box-autor display-flex">
                    <img src"" class="img-autor">
                    <p class="name-autor">Diego Pinheiro</p>
                </div>
            </div>

            <div class="box-noticias display-flex-collumn">
                <img src="" class="img-noticias img4">

                <h1 class="title-noticias title4"></h1>

                <p class="text-noticias p4"></p>

                <a href="#" class="link-noticias link4">LEIA MAIS></a>

                <div class="box-autor display-flex">
                    <img src"" class="img-autor">
                    <p class="name-autor">Diego Pinheiro</p>
                </div>
            </div>


        </div>

Minha utra div a container-box-noticias ela guarda minhas caixas com as noticias, e nela que quero deixar o overflow-x: scroll mas nea nao funciona, mas se coloco na minha div global a container-blog ai ele funciona, mas ai vai tudo pro lado quando rolo, vai o titulo o botão e não é isso que gostaria.

Não estou entendendo o poque de nao funcionar na div inferior, vou cloca o css:

.display-flex {
    display: flex;
}

.display-flex-collumn {
    display: flex;
    flex-flow: column;
}

.container-blog {
    width: 100%;
    height: 43em;
    overflow-x: scroll;
}
.title-blog {
    color: #ee8700;
    font-size: 2.4em;
    font-weight: 600;
    font-family: 'Lekton', sans-serif;
    margin-bottom: 2em;
    text-align: center;
}

.container-box-noticias {
    width: 74em;
    height: 68%;
    padding-left: 51em;
    overflow-x: scroll;
}

.box-noticias {
   width: 24%;
    height: 26em;
    box-shadow: 0px 9px 41px -8px rgba(138,131,138,1);
    border-radius: 20px;
    justify-content: space-between;
    outline: 0;
    overflow: hidden;
}

.img-noticias {
    width: 100%;
    height: 36%;
}

.title-noticias {
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    padding: .3em;
}

.text-noticias {
    height: 2.7em;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: .9em;
    padding: .3em;
}

.link-noticias {
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    color: #4da3d4;
    padding: .3em;
}

.box-autor {
    height: 4em;
    justify-content: space-around;
    align-items: center;
   width: 65%;
}

muito obrigado.