CSS height 100% inside of element with height 90vh

Question

I can't make div class="authorizationHolder__textHolder" height 100% to take all available space.

I want to get something like this:

How can i do it?

.authorizationHolder {
  width: 60%;
  min-height: 90vh;
  position: relative;
  background-color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin: 5vh auto;
  box-sizing: border-box;
  padding: {
    top: 50px;
    left: 30px;
    right: 30px;
    bottom: 10px;
  }
  &__content {
    width: 40%;
    min-width: 300px;
    margin: 0 auto;
  }
  &__textHolder {
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}

<div class="authorizationHolder">
  <div class="registration__titleBlock">
    <div class="titleText">{{ title }}</div>
  </div>

  <div class="authorizationHolder__textHolder">
    <div class="baseText">{{ text }}</div>
  </div>
</div>

Answer 1

Since you are using display: flex for .authorizationHolder__textHolder, you can use flex-grow: 1 to take the available place.

For this to work, the parent also needs to use flex. So be sure to add display: flex; and flex-direction: column; to .authorizationHolder.

Here is your updated snippet!

.authorizationHolder {
    display: flex;
    flex-direction: column;
    width: 60%;
    min-height: 90vh;
    position: relative;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    margin: 5vh auto;
    box-sizing: border-box;
    padding: 50px 30px 30px 10px;
}

.authorizationHolder__content {
    width: 40%;
    min-width: 300px;
    margin: 0 auto;
}

.authorizationHolder__textHolder {
    background-color: whitesmoke;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<div class="authorizationHolder">
    <div class="registration__titleBlock">
        <div class="titleText">{{ title }}</div>
    </div>

    <div class="authorizationHolder__textHolder">
        <div class="baseText">{{ text }}</div>
    </div> 
</div>