I am facing an issue with setting the height of a div inside another div. To better illustrate my problem, here is the code snippet:
.prodContent1 {
position: absolute;
background-color: #e1e1e1;
border: 1px solid #ddd;
width: 100%;
box-sizing: border-box;
height: 300px;
z-index: 1;
display: none;
}
.prod-div {
background-color: grey;
width: 20px;
height: 20px;
box-sizing: border-box;
}<div class="prodContent1" id="prodCont1">
<div class="prod-div">
</div>
</div>Despite setting both width and height to be equal, I expected the div to form a cube. However, when I checked it in the browser, all I could see was a small grey box as shown in this image: https://i.stack.imgur.com/nINmo.png
I have tried setting the height to just 1px but upon further investigation using browser measurement tools, I found that the actual height was four times more than what I had set. (Please ignore the display:none property, as this div is meant for dropdown purposes).
Has anyone ever encountered such an issue before?