Make container fit CSS Grid: Calculator Project

[SaadKhan]

I’m working on the calculator projects and I want my calculator div’s height to fit the numberPad div which is using a grid layout. For my parent container I used the height: auto; property and it does not respond to the grid underneath… How can I fix this?

You can see the latest live version here but it does not have height: auto on calculator. However, adding the height made no difference. The SASS sheet is a bit complicated so I will post the css bellow;

https://react-calculator-freecode-camp.herokuapp.com/

sparksflyupwards/React-Calculator

@mixin calculator {
width: 100%;
margin: 4% auto;
height: auto;

width: $calculator-desktop-width;
border-radius: 5%;

box-shadow: inset 4px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);

}

.numberPad{
@include numberPad();
grid-template-columns: $grid-width $grid-width $grid-width $grid-width;
grid-template-rows: $grid-height $grid-height $grid-height $grid-height $grid-height;
margin-top: 10%;
min-height: 36%;
}

[dLetulle]

Not sure if this is what you’re referring to, but if you’re saying you want your buttons to stay within your .calculator div as you resize the window…

The issue I see is that your .calculator width and height are set to a static value in pixels, but your .inputButton size is based on the view width and view height, which will cause them to grow and shrink as your calculator stays the same size, causing this issue.

You can fix this simply by setting your .inputButton and .bigInputButton to be a static value like pixels or rem. Then even on resize they’ll stay within your .calculator div.