0

I want to resize flex-container by using percentage units like height: 10%, but it only fits to content's height. If i try using px, it works, but i definitely need percentages.

.top_section {
  display: flex;
  height: 10%;
  background-color: #8ac858;
}
<div class="top_section">
  <div class="nav menu">
    <a href="#" class="nav_unit">Home</a>
    <a href="#" class="nav_unit">Rating</a>
    <a href="#" class="nav_unit">Map</a>
  </div>
  <div class="auth_menu">
    <a href="#" class="auth_text">Register</a>
    <a href="#" class="auth_text">Login</a>
    <input type="text" class="login">
    <input type="password" class="password">
  </div>
</div>

What should i do in this case?

VXp
  • 11,598
  • 6
  • 31
  • 46
Roman Kulaha
  • 55
  • 1
  • 5

1 Answers1

1

.top_section has height: 10%. So .top_section's height will be 10% of its parent. So then you need to set the height of its parent element.

For example, if its parent is body, then you can have

body: {
    height: 100vh;
}
Vahid
  • 6,639
  • 5
  • 37
  • 61