Por que a altura do meu elemento Grid não está sendo calculada corretamente?
Estou tendo problemas com a altura de um elemento de grade CSS. O código que estou usando é:
.gridContainer {
border: thin solid black;
background: rgba(255, 0, 0, 0.5);
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 100px;
height: 100px;
grid-template-areas: 'windowContentHolder';
}
.gridItem {
grid-area: windowContentHolder;
background: rgba(255, 255, 0, 0.5);
width: 200%;
height: 200%;
overflow: auto;
}
.content {
background: rgba(255, 0, 0, 0.5);
}
<div class="gridContainer">
<div class="gridItem">
<div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>
</div>
</div>
Como você pode ver ogridItem
está definido para serheight:200%
e o resultado esperado não é o pretendido. Deve ser duas vezes mais alto (200px
) como pai (100px
), com qualquer altura extra ocultada pela barra de rolagem, embora a propriedade height não pareça estar definida.
Parece que a porcentagem está considerandoa altura da criança em vez da altura pai, porque se inspecionarmos de perto o elemento, veremos que sua altura é duas vezes a altura do elemento filho.
O elemento com 'oi' não está transbordando como seria de esperar. Alterando agridContainer
para 'bloquear' funciona como esperado, mas não com 'grade':
.gridContainer {
border: thin solid black;
background: rgba(255, 0, 0, 0.5);
display: block;
width: 100px;
height: 100px;
}
.gridItem {
grid-area: windowContentHolder;
background: rgba(255, 255, 0, 0.5);
width: 200%;
height: 200%;
overflow: auto;
}
.content {
background: rgba(255, 0, 0, 0.5);
}
<div class="gridContainer">
<div class="gridItem">
<div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>
</div>
</div>
</div>