CODEWITHSUNDEEP
htmlcssflexbox
Stomata
Stomata

Reputation: 51

How to set div height 100% to its container with flex and keep centering in vertical alignment?

I tried to centering text and button using flexbox, and keep the column equally. But I have difficulties how to set column height as 100% to its container. When I set height to 100%, its vertical alignment not in middle anymore. I don't want achieving the result using table or javascript.

.container {
  display:flex;
  border-top: solid 1px;
  border-bottom: solid 1px;
  align-items: center;
  height:48px;
}
.column {
  flex-basis:100%;
  text-align:center;
}
.mid-col {
  border-left:solid 1px;
  border-right:solid 1px;
}
<div class="container">
  <div class="column">
    <div>50</div>
    <div>Following</div>
  </div>
  <div class="column mid-col">
    <div>50</div>
    <div>Followers</div>
  </div>
  <div class="column">
    <button>Follow</button>
  </div>  
</div>

JS Fiddle: fiddle

Upvotes: 2

Views: 103

Answers (2)

kukkuz
kukkuz

Reputation: 42360

You must use nested flexbox if you want the columns to get 100% height of container - add this:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

to column and remove align-items: center from container (so that the default align-items: stretch may take effect).

(You are not able to set 100% height for column now as you have align-items: center applied to your container)

See demo below:

.container {
  display: flex;
  border-top: solid 1px;
  border-bottom: solid 1px;
  height: 48px;
}
.column {
  flex-basis: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mid-col {
  border-left: solid 1px;
  border-right: solid 1px;
}
<div class="container">
  <div class="column">
    <div>50</div>
    <div>Following</div>
  </div>
  <div class="column mid-col">
    <div>50</div>
    <div>Followers</div>
  </div>
  <div class="column">
    <button>Follow</button>
  </div>
</div>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 20006

You can achieve this without using table just by using display: table for parent and display: table-cell; vertical align: middle; to child. If you want that using flex itself, I have implemented that in below example.

<!doctype html>
<html>

<head>
    <style>
        .container {
            border-top: solid 1px;
            border-bottom: solid 1px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 300px;
        }
        
        .column {
            text-align: center;
            width: 33%;
        }
        
        .column--top {
            align-self: flex-start;
        }
        
        .column--bottom {
            align-self: flex-end;
        }
        
        .mid-col {
            border-left: solid 1px;
            border-right: solid 1px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="column">
            <div>50</div>
            <div>Following</div>
        </div>
        <div class="column mid-col">
            <div>50</div>
            <div>Followers</div>
        </div>
        <div class="column">
            <button>Follow</button>
        </div>
    </div>

</body>

</html>

Upvotes: 0

Related Questions