Problem Solution: Flex-end and Percentages as Height

3336 views

Edited: 2021-01-20 19:03

There is a not-so-obvious trap when using flex-end and flex-start to vertically align elements in their parent. Intuitively people will try to set the child elements to height:100% of the parent. While one can understand the intention, this is in fact not needed.

When the parent element is display:flex; child elements will automatically be arranged into columns and take up 100% height of the parent.

Setting height:100% on the child can lead to unexpected behavior, because the height of the parent is not set (a percentage is not set). If you changed the height of the parent to a fixed height, like pixel, then it would work. But having a height in pixels is not ideal. Instead, we want the box to automatically adjust the height as needed.

Using flex-end and flex-start the right way

When attempting to debug a problem with HTML and CSS code, it may speed up the process if you compare your own code with a basic working example, stripped from all unnecessary parts (be it either CSS declarations or HTML elements). The below is a working example of how to accomplish what people often intend when running into problems with percentage heights and flexbox.

The CSS:

.sectionwrapper {display:flex;flex-wrap:wrap;height:100%;}
.column {flex-basis:300px;flex-grow:1;display:flex;flex-wrap:wrap;}
.column .bottom img {width:100%;}
.column .top {align-self:flex-start;}
.column .bottom {align-self:flex-end;}

The HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>A Simple Example of How to Use CSS Flex-end</title>
    <link rel="stylesheet" href="layouts.css" type="text/css">
</head>

<body>
  <h1>Flex-end Experiment:</h1>
  <div class="sectionwrapper">
    <div class="column">
      <div class="top">
        <p>This example shows how to use flexbox with flex-end and flex-start the right way. The parent container "sectionwrapper" has a height of 100%, while the individual columns have no height. The columns will automatically take up 100 percent height of the parent, unless something else is specified.</p>
      </div>
      <div class="bottom"><img src="cat1.jpg"></div>
    </div>
    <div class="column">
      <div class="top">
        <p>A common problem people run into when learning flexbox has to do with using percentages as height on the column elements. This causes the columns to "collapse", since you are trying to give it a 100% height of the parent element, which has no set height (A percentage is not a "set" value.). Using pixels instead might solve this problem, but that is obviously not ideal.</p>
      </div>
      <div class="bottom"><img src="cat2.jpg"></div>
    </div>
    <div class="column">
      <div class="top">
        <p>Instead of messing with the a height on the child-elements, we have applied the CSS shown in the example above this flexbox.</p>
      </div>
      <div class="bottom">
        <img src="cat3.jpg">
      </div>
    </div>
  </div>
</body>

</html>

See example here: A Simple Example of How to Use CSS Flex-end

Using flex-end and flex-start the right way

Tell us what you think: