0

inserir a descrição da imagem aqui

Bem, eu fiz uma div principal, e ela contém outras 3 div. O conteúdo dessas 3 divisões internas é 1234567890 três vezes seguidas, e gostaria que o width delas se expandisse dentro da div principal de acordo com o tamanho do conteúdo na horizontal, e que essa div principal não ultrapassasse o tamanho máximo da tela mas que tivesse uma rolagem horizontal com o overflow-x. Sendo que ativa o overflow-x das divisões internas, e a divisão principal não faz uso.

Código no 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. */
}

Não consegui encontrar nenhuma resposta no site que me ajude. Como corrigir isso apenas com Html5 e CSS3?

2 Respostas 2

1

Recomendo que use uma outra div dentro da div.result. Digo isso pq é muito problemático trabalhar com overflow em filhos diretor de um pai com display:flex. Então ou vc coloca o overflow-y no próprio pai ou no "neto"...

inserir a descrição da imagem aqui

Segue o código da imagem acima.

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


Opção que não recomendo. Pois vc pode precisar do overflow-y caso o conteúdo tenha muitas linhas

Vc colocou overflow nas divs filhas classe .result. Basicamente tirando isso resolve, assim a div de resultado expande conforme o conteúdo. Deixe essas divs com uma borda apenas pra vc verificar até onde cada uma vai.

inserir a descrição da imagem aqui

Segue o código da imagem acima

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

1
  • Essa resposta não está perfeita, pode não funcionar para o seu caso em específico. O pai por ser flex deixa os filhos com um controle de overflow estranho... Se não se aplicar no modelo final seria interessante fazer o CSS com Display:inline-block ou mesmo Float...
    – hugocsl
    Commented 31/05/2019 às 12:18
0

Perfeito, eu usei a primeira alternativa. Para "esticar" a largura das divs "filhas" eu coloquei mais caracteres dentro delas, e creio que vou deixar caracteres de espaço no resultado final como uma gambiarra. E o resultado foi este a seguir com um div principal, 3 divs "filhas", e cada "filha" com uma div "neta" pra quem tiver a mesma dúvida:

inserir a descrição da imagem aqui

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. */
}

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 .