Using CSS Flex to Make Elements Equal Height in a Row

Question

I'm trying to make the the elements with yellow background same height as others in that row using flex, but cannot figure it out with this design. The li elements just dont wan't to be at full height.

Run the code snippet to see what I'm talking about. Thank you!

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  width: 90%;
  padding: 0;
  margin: 0 auto;
  font-size: 0;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.header {
  background: yellow;
  flex: 1;
  font-size: 13px;
  width: 100%;
}

.body {
  font-size: 13px;
  border: 1px solid orange;
  background: lightblue;
  width: 100%;
}

.liWrapper {
  display: inline-flex;
  width: 25%;
  min-width: 25%;
  margin: 10px 0 0 0;
  padding: 0;
}

<div id="main">
  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef e</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wefwf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef</div>
      <div class="body">Body</div>
    </div>
  </div>
</div>

Answer 1

You need to add a

display: flex;
flex-wrap: wrap;

to #main (this also contains an implicit flex-direction: row;). You're expecting each of the .wrapper's to be the same height, but you don't have any styling telling them to do that. The display: flex; and flex-direction: column; on the .wrapper simply tells the wrapper to divvy up its height among its child elements. If it's not already the right height, more won't magically appear.

The flex row and wrap makes all child elements equal height by default, which I assume is the behavior you want. :)

        html, body {
            height: 100%;
            margin: 0; padding: 0;
        }


        #main{
            width: 90%;
            padding: 0;
            margin: 0 auto;
            font-size: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .wrapper {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
        }

        .header {
            background: yellow;
            flex: 1;
            font-size: 13px;
            width: 100%;
        }

        .body {
            font-size: 13px;
            border: 1px solid orange;
            background: lightblue;
            width: 100%;
        }

        .liWrapper{
            display: inline-flex;
            width: 25%;
            min-width: 25%;
            margin: 10px 0 0 0;
            padding: 0;

        }

<div id="main">
    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>

    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef e</div>
            <div class="body">picture</div>
        </div>
    </div>
    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>

    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wefwf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>
    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>

    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef</div>
            <div class="body">Body</div>
        </div>
    </div>
</div>