Overflow-x of a <div> containing three other <div>

Question

Well, I did a major div, and it contains three other div. The content of these 3 internal divisions is 1234567890 three times in a row, and I would like their width to expand within the main div according to the size of the content horizontally, and that this main div does not exceed the maximum screen size but has a horizontal scrolling with the overflow-x. Being it activates the overflow-x of the internal divisions, and the main division does not make use.

Code in the CSS:

#divResultadosNaTela {
    margin: 0.5% 0.5% 0.5% 0; /* Espaçamento do elemento, no caso a divisão, com outros elementos. 20px com top, 0 com right e bottom, e 20 com left. */
    max-height: 430px; /* Altura máxima de 430 pixels. */
    font-size: 100%;
    display: flex; /* Coloca as divisões dos resultados um do lado do outro. */
    overflow-x: scroll; /* Coloca uma barra de rolagem no eixo x. */
}

/* Aqui é a classe das divisões dos resultados. */
.result {
    overflow-y: auto; /* Rolagem vertical automática. */
    max-height: 410px; /* Limita a altura das divisões dos resultados em 400 pixels para que não ultrapassem a tela. */
    margin: 0.5%; /* Espaçamento do elemento em relação a outros elementos. */
    padding: 0.5%; /* Espaçamento interno com relação aos elementos internos. */
}

I couldn’t find any answers on the site that would help me. How to fix this only with Html5 and CSS3?

Answer 1

I recommend you use another div within the div.result. I say this because it is very problematic to work with overflow in a parent’s director sons with display:flex. Then either you put the overflow-y in the father himself or in the "grandson"...

Follow the image code above.

#divResultadosNaTela {
  margin: 0.5% 0.5% 0.5% 0;
  /* Espaçamento do elemento, no caso a divisão, com outros elementos. 20px com top, 0 com right e bottom, e 20 com left. */
  max-height: 430px;
  font-size: 100%;
  display: flex;
  /* Coloca as divisões dos resultados um do lado do outro. */
  overflow-x: scroll;
  /* Coloca uma barra de rolagem no eixo x. */
  width: 100%;
}

/* Aqui é a classe das divisões dos resultados. */
.result {
  border: 1px solid #000;
  margin: 0.5%;
  /* Espaçamento do elemento em relação a outros elementos. */
  padding: 0.5%;
  /* Espaçamento interno com relação aos elementos internos. */
}

/* esse é o conteinar que vai receber o overflow, não use overflow no filho direto de um pai flex. */
.result>div {
  max-height: 100%;
  overflow-y: auto;
}

<div id="divResultadosNaTela">
  <div class="result">
    <div>mmmmmmmmmmm123123213m12m3m12m3m12m3m12m3m12m3m12m3m12m3m123m12 Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Aperiam nobis ratione laborum inventore libero molestias ducimus. In dolorem
      necessitatibus quisquam nemo, autem dolore illum earum libero accusantium sit saepe nisi! Eum
      consectetur mollitia cum dolor est explicabo impedit, culpa aliquam, dolorum omnis ab? Molestias,
      asperiores? Aliquid hic laboriosam maiores iste eveniet exercitationem deserunt, nesciunt odit earum
      beatae nihil, quis ipsum minus laudantium. Dolor dicta eos esse similique est nesciunt, eligendi et
      reprehenderit at dolore adipisci. In facilis reprehenderit quis quo labore magnam hic ad laborum odit,
      natus debitis ab sed deleniti ipsum omnis officiis exercitationem architecto fugiat odio autem ex
      eligendi obcaecati. Illum recusandae nesciunt cupiditate harum officiis asperiores molestiae. Pariatur
      modi quibusdam id repellat tempora repudiandae asperiores, beatae esse, expedita quam qui rem maiores
      magnam velit sequi quia eum nostrum voluptates aliquid. Cumque iusto dicta id, culpa cum ullam ut
      tempora vel, beatae voluptas enim laboriosam ipsa doloremque a ea architecto cupiditate harum tempore
      nulla eaque illum nobis itaque? Repellat fuga, aliquid deleniti numquam sunt nobis quisquam cupiditate
      voluptas nihil perferendis eum rem optio voluptatum reprehenderit illo dignissimos necessitatibus.
      Incidunt et quae dolore qui. Molestiae in, velit, sint esse, enim omnis quo laborum possimus earum
      doloremque unde deleniti tenetur. Provident totam necessitatibus perspiciatis delectus eveniet ipsa
      dolores assumenda a libero. Magnam nesciunt quos voluptatibus facilis in sunt animi reiciendis dicta
      rerum fuga ea aliquam repellendus, perspiciatis, veniam cumque recusandae velit quibusdam, eos
      necessitatibus dolores natus. Tempore deserunt, voluptatem possimus quasi suscipit, ad minus quibusdam
      neque temporibus omnis quis esse magnam. Repellat enim incidunt at molestiae minima adipisci, odio culpa
      sapiente itaque consectetur ut magnam repellendus, quo explicabo reprehenderit illo fugiat magni iure
      dolor illum! Veritatis corporis dicta minima quas natus. Aspernatur magnam, porro eaque saepe dolore
      delectus, ullam ipsam nisi, unde molestiae odit maxime illum et suscipit voluptatum eos.</div>
  </div>
  <div class="result">mmmmmmmmmmm123123213m12m3m12m3m</div>
  <div class="result">mmmmmmmmmmm123123213m12m3m12m3m12m3m12m3m12m3m12m3</div>
</div>

---

Option that I do not recommend. 'Cause you might need the overflow-y if the content has many lines

You put overflow in divs daughters class .result. Basically taking it out solves, so the div result expands as content. Leave these divs with a borda just so you can see where each one goes.

Follow the image code above

#divResultadosNaTela {
        margin: 0.5% 0.5% 0.5% 0; /* Espaçamento do elemento, no caso a divisão, com outros elementos. 20px com top, 0 com right e bottom, e 20 com left. */
        max-height: 430px; /* Altura máxima de 430 pixels. */
        font-size: 100%;
        display: flex; /* Coloca as divisões dos resultados um do lado do outro. */
        overflow-x: scroll; /* Coloca uma barra de rolagem no eixo x. */
    }
    
/* Aqui é a classe das divisões dos resultados. */
.result {
    /* overflow-y: auto; */ /* TIRA ESSE OVERFLOW / Rolagem vertical automática. */
    border: 1px solid #000;
    max-height: 410px; /* Limita a altura das divisões dos resultados em 400 pixels para que não ultrapassem a tela. */
    margin: 0.5%; /* Espaçamento do elemento em relação a outros elementos. */
    padding: 0.5%; /* Espaçamento interno com relação aos elementos internos. */
}

<div id="divResultadosNaTela">
  <div class="result">mmmmmmmmmmm123123213m12m3m12m3m12m3m12m3m12m3m12m3m12m3m123m12</div>
  <div class="result">mmmmmmmmmmm123123213m12m3m12m3m</div>
  <div class="result">mmmmmmmmmmm123123213m12m3m12m3m12m3m12m3m12m3m12m3</div>
</div>

Answer 2

Perfect, I used the first alternative. To "stretch" the width of the Ivs "daughters" I put more characters inside them, and I believe I will leave space characters in the final result as a gambiarra. And the result was this to follow with a main div, 3 Divs "daughters", and each "daughter" with a div "granddaughter" for those who have the same doubt:

HTML5:

<div id="divResultadosNaTela" class="classeDivide3">

                <!-- Já tem 60 caracteres nos conteúdos das divisões!!! -->

                <div id="divCP" class="result">123456789012345678901234567890123456789012345678901234567890

                    <div id="subdivCP" class="result2"></div>

                </div>

                <div id="divCdC" class="result">123456789012345678901234567890123456789012345678901234567890

                    <div id="subdivCdC" class="result2"></div>

                </div>

                <div id="divCE" class="result">123456789012345678901234567890123456789012345678901234567890

                    <div id="subdivCE" class="result2"></div>

                </div>

        </div>

CSS3:

#divResultadosNaTela {
    margin: 0.5% 0.5% 0.5% 0; /* Espaçamento do elemento, no caso a divisão, com outros elementos. 20px com top, 0 com right e bottom, e 20 com left. */
    max-height: 430px; /* Altura máxima de 430 pixels. */
    font-size: 100%;
    display: flex; /* Coloca as divisões dos resultados um do lado do outro. */
    overflow-x: scroll; /* Coloca uma barra de rolagem no eixo x. */
}

/* Aqui é a classe das divisões dos resultados. (divs "filhos") */
.result {
    max-height: 410px; /* Altura máxima. */
    margin: 0.5%; /* Espaçamento do elemento em relação a outros elementos. */
    padding: 0.5%; /* Espaçamento interno com relação aos elementos internos. */
    border: dashed; /* Coloca a borda como tracejada. */
}

/* Classe das divisões internas às divisões dos resultados. (divs "netos") */
.result2 {
    margin: 0.5%; /* Espaçamento externo. */
    padding: 0.5%; /* Espaçamento interno. */
    overflow-y: auto; /* Barra de rolagem automática no eixo y. */
    max-height: 355px; /* Altura máxima. */
    font-size: 18px; /* Tamanho da fonte. */
    border: dotted; /* Coloca a borda como pontilhada. */
}