CSS Flex items not filling container-CodePudding

Struggling to get the flex items inside the calculator to fill the parent. Have been messing with so many declarations i'm going crazy.

Thought it was maybe because I didnt have flex-wrap set properly.. however that didn't seem to fix the issue. Any advice on where to start looking on that to make the buttons fill the calculator content? Also saw the bottom row is off by a tiny bit and not centred, however this has been set to centre already?

Many thanks,

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    padding: 0;
    margin: 0;
}

body {
    background-color: #d2a5a5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

button {
    background-color: #d2a5a5;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.calculator {
    background-color: #fff;
    border: 6px solid rgb(1, 1, 1);
    border-radius: 10px;
    width: 300px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 5px;
}

    .display {
        background-color: #fff;
        border: 1px solid #ccc;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .display input {
        background-color: #fff;
        border: none;
        width: 100%;
        height: auto;
        text-align: right;
        font-size: 20px;
        font-weight: bold;
        color: #000;
    }

    .calculator .content {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .calculator .row {
        display: flex;
    }

        .calculator .row .button {
            background-color: #fff;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 0;
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color:rgb(1, 1, 1);
        }

        .calculator .row .button.zero {
            flex: 2;
        }

            .calculator .row .button:hover {
                background-color: #ccc;
            }

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Calculator</title>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>
    <body>
        <div >
            <div >
                <div >
                    <input type="text"  value="0" disabled />
                </div>
                <div >
                    <button  onclick="calculator.addDigit(7)">
                        7
                    </button>
                    <button  onclick="calculator.addDigit(8)">
                        8
                    </button>
                    <button  onclick="calculator.addDigit(9)">
                        9
                    </button>
                    <button
                        
                        onclick="calculator.addOperator('/')"
                    >
                        /
                    </button>
                </div>
                <div >
                    <button  onclick="calculator.addDigit(7)">
                        7
                    </button>
                    <button  onclick="calculator.addDigit(8)">
                        8
                    </button>
                    <button  onclick="calculator.addDigit(9)">
                        9
                    </button>
                    <button
                        
                        onclick="calculator.addOperator('*')"
                    >
                        *
                    </button>
                </div>
                <div >
                    <button  onclick="calculator.addDigit(4)">
                        4
                    </button>
                    <button  onclick="calculator.addDigit(5)">
                        5
                    </button>
                    <button  onclick="calculator.addDigit(6)">
                        6
                    </button>
                    <button
                        
                        onclick="calculator.addOperator('-')"
                    >
                        -
                    </button>
                </div>
                <div >
                    <button  onclick="calculator.addDigit(1)">
                        1
                    </button>
                    <button  onclick="calculator.addDigit(2)">
                        2
                    </button>
                    <button  onclick="calculator.addDigit(3)">
                        3
                    </button>
                    <button
                        
                        onclick="calculator.addOperator(' ')"
                    >
                         
                    </button>
                </div>
                <div >
                    <button
                        
                        onclick="calculator.addDigit(0)"
                    >
                        0
                    </button>
                    <button  onclick="calculator.addDecimal()">
                        .
                    </button>
                    <button
                        
                        onclick="calculator.addOperator('=')"
                    >
                        =
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

Try this code. I just added width: 100% and height: 100%, and set height 20% to .screen class element relative to .calculator class element. and, added box-sizing: border-box as universal style.

* {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #d2a5a5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  background-color: #d2a5a5;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.calculator {
  background-color: #fff;
  border: 6px solid rgb(1, 1, 1);
  border-radius: 10px;
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  padding: 5px;
}

.display {
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.display input {
  background-color: #fff;
  border: none;
  width: 100%;
  height: auto;
  text-align: right;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.calculator .content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
}

.content .screen {
  height: 20%;
}

.content .screen input {
  height: 100%;
  text-align: right;
  padding: 0 2em;
}

.calculator .row {
  display: flex;
  flex: 1;
}

.calculator .row .button {
  background-color: #fff;
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  color: rgb(1, 1, 1);
}

.calculator .row .button.zero {
  flex: 2;
}

.calculator .row .button:hover {
  background-color: #ccc;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div >
    <div >
      <div >
        <input type="text"  value="0" disabled />
      </div>
      <div >
        <button  onclick="calculator.addDigit(7)">
                        7
                    </button>
        <button  onclick="calculator.addDigit(8)">
                        8
                    </button>
        <button  onclick="calculator.addDigit(9)">
                        9
                    </button>
        <button  onclick="calculator.addOperator('/')">
                        /
                    </button>
      </div>
      <div >
        <button  onclick="calculator.addDigit(7)">
                        7
                    </button>
        <button  onclick="calculator.addDigit(8)">
                        8
                    </button>
        <button  onclick="calculator.addDigit(9)">
                        9
                    </button>
        <button  onclick="calculator.addOperator('*')">
                        *
                    </button>
      </div>
      <div >
        <button  onclick="calculator.addDigit(4)">
                        4
                    </button>
        <button  onclick="calculator.addDigit(5)">
                        5
                    </button>
        <button  onclick="calculator.addDigit(6)">
                        6
                    </button>
        <button  onclick="calculator.addOperator('-')">
                        -
                    </button>
      </div>
      <div >
        <button  onclick="calculator.addDigit(1)">
                        1
                    </button>
        <button  onclick="calculator.addDigit(2)">
                        2
                    </button>
        <button  onclick="calculator.addDigit(3)">
                        3
                    </button>
        <button  onclick="calculator.addOperator(' ')">
                         
                    </button>
      </div>
      <div >
        <button  onclick="calculator.addDigit(0)">
                        0
                    </button>
        <button  onclick="calculator.addDecimal()">
                        .
                    </button>
        <button  onclick="calculator.addOperator('=')">
                        =
                    </button>
      </div>
    </div>
  </div>
</body>

</html>

Hope this helps you.