Basically, I am working on this code snippet for a calculator:
#calculator {
background-color: #212121;
border-radius: 10px;
overflow: hidden;
display: inline-block;
}
#functionality {
width: 100%;
height: 100%;
margin: 15px 5px 5px 15px;
overflow: hidden;
}
#display_calc {
max-width: 91%;
width: 91%;
height: 70px;
background-color: #1a1a1a;
}
#display {
min-width: 100%;
max-width: 100%;
height: 100%;
font-size: 50px;
background-color: rgba(0, 50, 0, 5);
color: white;
border: none;
}<div id="calculator">
<div id="functionality">
<div id="display_calc">
<input id="display">
</div>
</div>
</div>However, I'm facing an issue where changing the font size of the display input element causes the width to expand excessively. Despite trying various solutions and adding restrictions to the div elements, the maximum width property set for the input field does not seem to work as expected.