Search code examples
htmlcssflexboxresponsive-designtailwind-css

How to divide three <div> vertically in a 20:50:30 ratio using flexbox with full height of screen?

I want to make a mobile first responsive layout using flex where three sections are divided vertically in 20:50:30 ratio with full height of screen.

This the HTML part:

<body>
  <main>
    <div class="parent">
      <div class="topSection">
        This is Top Section
      </div>
      <div class="middleSection">
        This is Middle Section
      </div>
      <div class="bottomSection">
        This is Bottom Section
      </div>
    </div>
  </main>
</body>

Expected Layout:

Vertically divided sections using flexbox

Solution

  • Use height: 100vh to make the parent 100% of the "view height". Set display: flex on your parent and set the flex-direction: column.

    Then you can use the flex option on the children to give them the relative size you want.

    The whole css should look something like this:

    .parent {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.topSection {
    flex: 2;
}

.middleSection {
    flex: 5;
}

.bottomSection {
    flex:3;
}

    I hope this is what you are looking for. Have a great day 🖖