[GridLayout] Scroll em div com tamanho variavel

Programação Java
,
#1

Bom dia senhores e senhoras, eu estou usando css gridlayout para organizar o template da minha página e tenho uma div “conteudo” proporcional a altura da tela, até ai tudo certo, só que agora preciso que essa div crie um scroll quando esse conteúdo ultrapasse o tamanho da div só que não estou conseguindo… alguém pode me ajudar?

CSS

#template-divTudo {
    height: 100%;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 1fr;  
}
#template-divConteudo {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;

    background-color: gray;
}

Se eu adicionar a propriedade overflow-y: scroll; ele cria o scroll mas não usa… ou seja, ele aumenta o tamanho da minha div de acordo com o conteúdo. Meu objetivo é ter uma div que tem um tamanho fixo em relação ao tamanho da tela (eu fiz sem dificuldades com gridLayout), e que tenha uma barra de rolagem caso o conteúdo ultrapasse o tamanho da div.

#2

Já tentou somente “overflow: scroll;” . Sem o y ? É para funcionar assim!
Ou tenta também, os dois juntos:

overflow-x: scroll;
overflow-y: scroll;

#3

Mas eu não quero o scroll em “x” (não quero o scroll horizontal)… Eu gostaria de uma div com tamanho proporcional a tela (já tenho) que tivesse um scroll vertical quando necessário… o problema do overflow-y: scroll; é que ele não está funcionando… ele está criando a barrinha, mas quando o conteúdo passa o tamanho atual da div ele está aumentando minha div…

#4

Que estranho, aqui funciona. Veja só:

  <!DOCTYPE html>
    <html>
    <head>
    <style>
    .scroll {
        background-color: #00FFFF;
        width: 150px;
        height: 150px;
        overflow-y: scroll;
        overflow-y: auto;
    }

    </style>
    </head>
    <body>

    <div class="scroll">You can use the overflow property when you want to have better control of the layout.
    You can use the overflow property when you want to have better control of the layout.
    You can use the overflow property when you want to have better control of the layout.</div>

    </body>
    </html>
#5

Eu peguei o seu exemplo e modifiquei pro que eu quero e deu certo:

<!DOCTYPE html>
    <html>
    <head>
    <style>
	* {
    margin: 0;
    padding: 0;
}
    html, body, #divTudo{
    height: 100%;
}
	#divTudo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px 1fr 50px;  
	
	background: blue;
}
	#divConteudo {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;

	text-align: center;
    background-color: lightblue;
	overflow-y: scroll;
}
    </style>
    </head>
    <body>

    <div id="divTudo">
	  <div id="divConteudo">
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  <p>teste</p>
	  </div>
	</div>

    </body>
    </html>

Mas dentro da minha aplicação não funciona de jeito nenhum, tem ideia do que pode estar causando essa diferença no CSS? acho que a unica coisa que tem acima do meu divConteudo é um h:form algo nele pode interferir no meu layout?

#6

Olha, descobri o que está causando, mas não sei o que fazer pra resolver… Eu tenho a div conteudo no arquivo “template” que separa a área que quero meu texto, mas no arquivo “pagina1” eu tenho uma div conteudo2 com esse “overflow-y” (que não funciona), ou seja, o overflow só funciona na div do template, mas nunca na pagina filha… já pintei esse div conteudo2 de verde, rosa, etc… Ou seja, CSS funciona, mas “overflow: scroll” não pega de jeito nenhum nem aparece as barrinhas laterais…

#7

Com certeza está havendo algum conflito de código entre suas divs. Faz assim, você vai ter que postar não só o código das ‘divs’ mas também o seu código html pra ver o que está acontecendo e o que podemos fazer. Tente colocar seu script funcionando num editor online como este aqui, o jsfiddle: https://jsfiddle.net/. Coloque exatamente onde está dando problema, uma parte que seje mas que funcione para ficar mais fácil de ajudar.

Depois, você manda o link do jsfiddle para a gente dar uma olhada em seu código lá.