CODEWITHSUNDEEP
htmlcssflexbox
HendrikEng
HendrikEng

Reputation: 684

Flexbox equal height doesn't work

I am trying to use flexbox with susy, but somehow it won't work.

I tried all questions I found here but it always breaks and doesn't keep the same height for text containers and image containers, mobile view works from 38 em on it doesnt.

This is what I tried, as soon as I add display: flex to the listed items in the container it displays all in one row, instead of stacked.

I also figured I have to use display box for the image...

http://codepen.io/HendrikEng/pen/wWyBGv

<div class="l-wrap-page">
    <!-- Start Main Content Wrapper -->
    <div class="l-wrap-main">
        <!--  Start Quote -->
        <div class="c-quote">
            <h2 class="c-quote__title">Quote</h2>
            <div class="c-quote__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <button class"o-btn">mehr</button>
        </div>
        <!-- End Quote -->
        <!-- Start Content Block -->
        <div class="c-block">
            <div class="c-block__item">
                <div class="o-media">
                    <img src="http://dummyimage.com/650x325/000/fff" alt="">
                </div>
            </div>
            <div class="c-block__item">
                <div class="c-block-article">
                    <h3 class="c-block-article__title">Headline</h3>
                    <div class="c-block-article__content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <button class"o-btn">mehr</button>
                    </div>
                </div>
            </div>
            <div class="c-block__item">
                <div class="o-media">
                    <img src="http://dummyimage.com/650x325/000/fff" alt="">
                </div>
            </div>
            <div class="c-block__item">
                <div class="c-block-article">
                    <h3 class="c-block-article__title">Headline</h3>
                    <div class="c-block-article__content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <button class"o-btn">mehr</button>
                    </div>
                </div>
            </div>
            <div class="c-block__item">
                <div class="o-media">
                    <img src="http://dummyimage.com/650x325/000/fff" alt="">
                </div>
            </div>
            <div class="c-block__item">
                <div class="c-block-article">
                    <h3 class="c-block-article__title">Headline</h3>
                    <div class="c-block-article__content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <button class"o-btn">mehr</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Content Block -->
    </div>

CSS:

*, *:before, *:after {
  box-sizing: border-box;
}

.l-wrap-page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: -owg-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-image: -webkit-linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-size: 50%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.l-wrap-page:after {
  content: " ";
  display: block;
  clear: both;
}

.l-wrap-main {
  width: 100%;
  float: left;
}

.c-quote {
  width: 100%;
  float: left;
}

.c-block {
  width: 100%;
  float: left;
}

.c-block:after {
  clear: both;
  content: '';
  display: table;
}

.c-block__item {
  width: 100%;
  float: left;
}

.c-block__item:last-child {
  float: right;
}


@media (min-width: 39.8em) {
  .l-wrap-main {
    width: 100%;
    float: left;
  }
  .c-quote {
    width: 100%;
    float: left;
  }
  .c-block {
    width: 100%;
    float: left;
  }
  .c-block:after {
    clear: both;
    content: '';
    display: table;
  }
  .c-block__item:nth-child(1), .c-block__item:nth-child(5) {
    width: 50%;
    float: left;
    background: rgba(248, 208, 220, 0.5);
  }
  .c-block__item:nth-child(3), .c-block__item:nth-child(8) {
    width: 50%;
    float: right;
    background: rgba(248, 208, 220, 0.5);
  }
  .c-block__item:nth-child(2), .c-block__item:nth-child(6) {
    width: 50%;
    float: right;
    background: rgba(248, 250, 251, 0.5);
  }
  .c-block__item:nth-child(4), .c-block__item:nth-child(8) {
    width: 50%;
    float: left;
    background: rgba(248, 250, 251, 0.5);
  }
  .c-block__item:last-child {
    float: right;
  }

}


h2 {
  font-size: 48px;
}

h2.o-headline {
  text-align: center;
}

.c-block__item img {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  width: 100%;
}

.l-wrap-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-block {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

Upvotes: 2

Views: 3987

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372099

When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Here are just a few:

  • justify-content: flex-start - flex items will stack at the start of the line
  • flex-wrap: nowrap - flex items are forced to stay in a single line
  • flex-shrink: 1 - flex items are allowed to shrink
  • align-items: stretch - flex items will expand to cover the cross-size of the container
  • flex-direction: row - flex items will align horizontally

Note the last setting. If you want your flex items to stack vertically, override this default setting (on the container) with flex-direction: column.

OR, you could turn on wrap (flex-wrap: wrap) and give each item enough width to force it to the next line. For example, width: 100% on each item, with wrap on the container, can create a single column of flex items.

For more info about flex equal height columns see:

In this case, try update the .c-block rule like this

Updated codepen

.c-block {
  display: flex;            /*  added property  */
  flex-wrap: wrap;          /*  added property  */
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

Upvotes: 4

Related Questions