Why does the child inside a scrolling element limits its height from its parent?

Question

Here is my code :

:root {
  --colorPrimary: #12b7ff;
  --colorPrimaryLight: #95ccff;
  --colorPrimaryDark: #095880;
  --colorSecondary: #00BBC1;
  --colorSecondaryLight: #80DDDA;
  --colorSecondaryDark: #00676A;
  --colorMainBackground: white;
  --colorButton: var(--colorSecondary);
  --colorButtonBorder: var(--colorSecondary);
  --colorButtonHover: var(--colorSecondaryDark);
  --colorInputBackground: var(--colorMainBackground);
  --colorInputBorder: var(--colorPrimary);
  --colorInputBorderFocus: var(--colorPrimaryDark);
  --stringFontName: 'Ubuntu';
  --dimenMainMargin: 10px;
  --dimenMainPadding: 30px;
  --dimenMainRadius: 10px;
  --dimenHeaderHeight: 50px;
  --dimenMainCentralDivMargin: 50px;
  --dimenButtonBorder: 0px;
  --dimenButtonBorderRadius: 5px;
  --dimenButtonPadding: 20px;
  --dimenButtonTextSize: 15px;
  --dimenInputBorder: 1px;
  --dimenInputPadding: 5px;
  --dimenInputBorderRadius: 5px;
  --dimenInputMargin: 10px;
  --dimenInputLabelMarginTop: 10px;
  --dimenParagraphSize: 16px;
  --timeLoadingAnimation: 2s;
  --timeImageHoverInTransition: 0.1s;
  --timeImageHoverOutTransition: 0.2s;
  --timeButtonHoverInTransition: 0.1s;
  --timeButtonHoverOutTransition: 0.2s;
}

main {
  position: fixed;
  display: flex;
  top: var(--dimenHeaderHeight);
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: auto;
  justify-content: center;
  overflow: auto;
}

main>* {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--dimenMainMargin);
  padding: var(--dimenMainPadding);
  border-radius: var(--dimenMainRadius);
  background: var(--colorMainBackground);
}

p {
  font-size: var(--dimenParagraphSize);
}

button {
  display: inline-block;
  background: var(--colorButton);
  border: var(--dimenButtonBorder) solid var(--colorButtonBorder);
  border-radius: var(--dimenButtonBorderRadius);
  padding: var(--dimenButtonPadding);
  transition: all var(--timeButtonHoverOutTransition);
  font-family: var(--stringFontName), sans-serif;
  font-size: var(--dimenButtonTextSize);
  font-weight: bold;
  cursor: pointer;
}

button.text {
  background: none;
  border: none;
  border-bottom: 1px solid var(--colorButtonBorder);
  border-radius: 0px;
  padding: 0px;
  margin: 0px;
  font-weight: normal;
  text-decoration: none;
  font-size: var(--dimenParagraphSize);
}

button.submit-button {
  width: 100%;
}

button:hover {
  background: var(--colorButtonHover);
  transition: all var(--timeButtonHoverInTransition);
}

button.text:hover {
  background: none;
  color: var(--colorButtonHover);
}

main div.central-div {
  display: flex;
  width: 100%;
  border-radius: 0px;
  background: var(--colorPrimary);
  margin-top: var(--dimenMainCentralDivMargin);
}

main div.central-div>div {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding: var(--dimenMainPadding);
  border-radius: var(--dimenMainRadius);
  background: var(--colorMainBackground);
}

h1 {
  color: var(--colorPrimaryDark);
}

form h1,
form p {
  box-align: center;
}

input,
input[type="text"],
input[type="password"],
input[type="mail"] {
  display: block;
  width: 100%;
  background: var(--colorInputBackground);
  padding: var(--dimenInputPadding);
  border: var(--dimenInputBorder) solid var(--colorInputBorder);
  border-radius: var(--dimenInputBorderRadius);
  margin-top: var(--dimenInputMargin);
  margin-bottom: var(--dimenInputMargin);
  transition: var(--timeButtonHoverOutTransition) all ease-out;
}

input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="mail"]:focus {
  border: var(--dimenInputBorder) solid var(--colorInputBorderFocus);
  transition: var(--timeButtonHoverInTransition) all ease-out;
}

label.input-label {
  display: inline-block;
  margin-top: var(--dimenInputLabelMarginTop);
}

<main>
  <div class="central-div">
    <div class="form">
      <h1> Créer un nouveau compte </h1>
      <p>Je souhaite plutôt <button class="text">me connecter</button></p>
      <label class="input-label">Nom d'utilisateur</label>
      <input type="text">
      <label class="input-label">Adresse mail</label>
      <input type="text">
      <label class="input-label">Mot de passe</label>
      <input type="password">
      <label class="input-label">Confirmez votre mot de passe</label>
      <input type="password">
      <button class="submit-button"> Créer un compte </button>
    </div>
  </div>
</main>

While running this snippet, you'll find a white rectangle : it is the background of the <div class="form"> that have to not exceed the height of the main element, the other elements making part of the "overflow".

How can I ask him to take the height he wants, without limitting from its parent's height, that is scrollable? Thanks for your help!

EDIT : for more clarty, there are the important code segments (css) :

    main {
      position: fixed;
      display: flex;
      top: var(--dimenHeaderHeight);
      left: 0px;
      right: 0px;
      bottom: 0px;
      height: auto;
      justify-content: center;
      overflow: auto;
    }

    main>* {
      position: relative;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: var(--dimenMainMargin);
      padding: var(--dimenMainPadding);
      border-radius: var(--dimenMainRadius);
      background: var(--colorMainBackground);
    }

    main div.central-div {
      display: flex;
      width: 100%;
      border-radius: 0px;
      background: var(--colorPrimary);
      margin-top: var(--dimenMainCentralDivMargin);
    }

    main div.central-div>div {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      padding: var(--dimenMainPadding);
      border-radius: var(--dimenMainRadius);
      background: var(--colorMainBackground);
    }

Answer 1

I added some HTML and comments and some additional CSS just to reset and give some visual to the full page.

FWIW This is what I THINK you are aiming towards here?

:root {
  --colorPrimary: #12b7ff;
  --colorPrimaryLight: #95ccff;
  --colorPrimaryDark: #095880;
  --colorSecondary: #00BBC1;
  --colorSecondaryLight: #80DDDA;
  --colorSecondaryDark: #00676A;
  --colorMainBackground: white;
  --colorButton: var(--colorSecondary);
  --colorButtonBorder: var(--colorSecondary);
  --colorButtonHover: var(--colorSecondaryDark);
  --colorInputBackground: var(--colorMainBackground);
  --colorInputBorder: var(--colorPrimary);
  --colorInputBorderFocus: var(--colorPrimaryDark);
  --stringFontName: 'Ubuntu';
  --dimenMainMargin: 10px;
  --dimenMainPadding: 30px;
  --dimenMainRadius: 10px;
  --dimenHeaderHeight: 50px;
  --dimenMainCentralDivMargin: 50px;
  --dimenButtonBorder: 0px;
  --dimenButtonBorderRadius: 5px;
  --dimenButtonPadding: 20px;
  --dimenButtonTextSize: 15px;
  --dimenInputBorder: 1px;
  --dimenInputPadding: 5px;
  --dimenInputBorderRadius: 5px;
  --dimenInputMargin: 10px;
  --dimenInputLabelMarginTop: 10px;
  --dimenParagraphSize: 16px;
  --timeLoadingAnimation: 2s;
  --timeImageHoverInTransition: 0.1s;
  --timeImageHoverOutTransition: 0.2s;
  --timeButtonHoverInTransition: 0.1s;
  --timeButtonHoverOutTransition: 0.2s;
}

body {
  /* basic page setup */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* set to what most browswers default to */
  font-size: 16px;
  /* put headers, main and footer on the page */
  display: grid;
  grid-template-rows: auto 1f auto;
 /* place-items: center;*/
  background-color: #FFAA0020;
}

header {
  /* just to show what is where */
  display: grid;
  place-items: center;
  background-color: #00FF0022;
  border-bottom: solid 1px #00FF0088;
  width: 100%;
  height: var(--dimenHeaderHeight);
  position: sticky;
  top:0;
}

footer {
  /* just to show what is where */
  background-color: #0000FF22;
  border-bottom: solid 1px #0000FF88;
  display: grid;
  place-items: center;
  height: 3em;
  width: 100%;
}

main {
  /*  position: fixed; 
  top: var(--dimenHeaderHeight);
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: auto;*/
  display: flex;
  justify-content: center;
  overflow: auto;
  width: 100vw;
}


/* asterisk * here is/was same as .central-div */
main>.central-div {
  /* position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;*/
  margin-top: var(--dimenMainMargin);
  padding: var(--dimenMainPadding);
  border-radius: var(--dimenMainRadius);
  background: var(--colorMainBackground);
}

p {
  font-size: var(--dimenParagraphSize);
}

button {
  display: inline-block;
  background-color: var(--colorButton);
  border: var(--dimenButtonBorder) solid var(--colorButtonBorder);
  border-radius: var(--dimenButtonBorderRadius);
  padding: var(--dimenButtonPadding);
  transition: all var(--timeButtonHoverOutTransition);
  font-family: var(--stringFontName), sans-serif;
  font-size: var(--dimenButtonTextSize);
  font-weight: bold;
  cursor: pointer;
}

button.text {
  background: none;
  border: none;
  border-bottom: 1px solid var(--colorButtonBorder);
  border-radius: 0px;
  padding: 0px;
  margin: 0px;
  font-weight: normal;
  text-decoration: none;
  font-size: var(--dimenParagraphSize);
}

button.submit-button {
  width: 100%;
}

button:hover {
  background: var(--colorButtonHover);
  transition: all var(--timeButtonHoverInTransition);
}

button.text:hover {
  background: none;
  color: var(--colorButtonHover);
}

/* see above this is a DUPE */
main div.central-div {
  display: flex;
  width: 100%;
  border-radius: 0px;
  background: var(--colorPrimary);
  margin-top: var(--dimenMainCentralDivMargin);
}

/* was bad form to use element name IMHO */
main div.central-div>.form
/*main div.central-div>div*/ {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding: var(--dimenMainPadding);
  border-radius: var(--dimenMainRadius);
  background: var(--colorMainBackground);
}

/* note how this IMHO terrible selector makes header colored also */
h1 {
  color: var(--colorPrimaryDark);
}

form h1,
form p {
  box-align: center;
}

input,
input[type="text"],
input[type="password"],
input[type="mail"] {
  display: block;
  width: 100%;
  background: var(--colorInputBackground);
  padding: var(--dimenInputPadding);
  border: var(--dimenInputBorder) solid var(--colorInputBorder);
  border-radius: var(--dimenInputBorderRadius);
  margin-top: var(--dimenInputMargin);
  margin-bottom: var(--dimenInputMargin);
  transition: var(--timeButtonHoverOutTransition) all ease-out;
}

input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="mail"]:focus {
  border: var(--dimenInputBorder) solid var(--colorInputBorderFocus);
  transition: var(--timeButtonHoverInTransition) all ease-out;
}

label.input-label {
  display: inline-block;
  margin-top: var(--dimenInputLabelMarginTop);
}

<header>
  <div>
    <h1>Some things in the header</h1>
  </div>
</header>
<main>
  <div class="central-div">
    <div class="form">
      <h1> Créer un nouveau compte </h1>
      <p>Je souhaite plutôt <button class="text">me connecter</button></p>
      <label class="input-label">Nom d'utilisateur</label>
      <input type="text">
      <label class="input-label">Adresse mail</label>
      <input type="text">
      <label class="input-label">Mot de passe</label>
      <input type="password">
      <label class="input-label">Confirmez votre mot de passe</label>
      <input type="password">
      <button class="submit-button"> Créer un compte </button>
    </div>
  </div>
</main>
<footer>footer something</footer>