min-height:max-content; not working when using with the 50vh of two div-CodePudding

  .div1{
    height:50vh;
    display:block;
    width:100%;
    background-color:green;
    min-height:max-content !important;
  }
  p{
    min-height:max-content;
  }

  .div2{
    height:60vh;
    display:block;
    width:100%;
    background-color:blue;
  }

<body>
    <div >
        <p>Aim of the Project is to give the consumers, a 2nd layer of the security system for their home to safeguard their valuable things. This project provides us a two-factor authentication for our Home. In this project we use the ESP8266 microcontroller to get the signal from phone through Wi-Fi and based on that instruction microcontroller decide to give instruction to the Servo Motor. The Servo motor is connected to the door lock. To Open the door, user need to install the app that we designed using MIT app inventor, then they need to connect to internet. Then they need to verify the fingerprint or Enter the password in the app, if the password entered is correct the app will send open() signal to the Microcontroller via Wi-Fi then ESP8266 give open signal to the servo motor to open the door. The door opened or closed information is got by the button mechanism and the information is stored in MIT app inventor CLOUDDB with the time. Vibration Sensor connected to ESP8266 to sense, is someone break the door and send the information to app. User can able to get when door opened information from cloudDB in app.<p>
    </div>

    <div >
      <p>Aim of the Project is to give the consumers, a 2nd layer of the security system for their home to safeguard their valuable things. This project provides us a two-factor authentication for our Home. In this project we use the ESP8266 microcontroller to get the signal from phone through Wi-Fi and based on that instruction microcontroller decide to give instruction to the Servo Motor. The Servo motor is connected to the door lock. To Open the door, user need to install the app that we designed using MIT app inventor, then they need to connect to internet. Then they need to verify the fingerprint or Enter the password in the app, if the password entered is correct the app will send open() signal to the Microcontroller via Wi-Fi then ESP8266 give open signal to the servo motor to open the door. The door opened or closed information is got by the button mechanism and the information is stored in MIT app inventor CLOUDDB with the time. Vibration Sensor connected to ESP8266 to sense, is someone break the door and send the information to app. User can able to get when door opened information from cloudDB in app.<p>
    </div>
  </body>

I tried to make two div with 50vh when i set min-height:max-content; it does not work, take a look at the code

enter image description here

CodePudding user response：

You just need to change height to min-height

.div1{
    min-height:50vh;
    display:block;
    width:100%;
    background-color:green;
    min-height:max-content !important;
  }
  p{
    min-height:max-content;
  }

  .div2{
    min-height:60vh;
    display:block;
    width:100%;
    background-color:blue;
  }

CodePudding user response：

This code worked for me. Two boxes of the same size that cover the entire screen

* {
  margin: 0;
  padding: 0;
}
.div1 {
  height: 50vh;
  display: block;
  width: 100%;
  background-color: green;
  min-height: max-content !important;
}
p {
  min-height: max-content;
}

.div2 {
  height: 50vh;
  display: block;
  width: 100%;
  background-color: blue;
}