Using flex to vertically center content of row without using fixed height

[aaron4osu]

I’m always using something like this where I have what I call left/right boxes with a background image on one side’s .box and content on the other sides box. To make it more response without having to added heights I wanted the box with the image side to be the height of the content side (content height plus padding). Here is a code pen but I’m trying to do away with the fixed heights.
https://codepen.io/aaron4osu/pen/MWyWgWJ

html

<section class="">
  <div class="container">
    <div class="row">
      
      <div class="col-md-6 left-right-boxes">
        <div class="box content_box">
          <h2>Headline</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

          <p>Tristique senectus et netus et malesuada fames ac turpis. Lacus vestibulum sed arcu non odio. Morbi tincidunt ornare massa eget egestas purus. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Diam quam nulla porttitor massa id neque aliquam vestibulum. Placerat vestibulum lectus mauris ultrices eros in. Blandit libero volutpat sed cras. Orci nulla pellentesque dignissim enim sit amet. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed.</p>
        </div><!-- close box -->
      </div><!-- close col -->

      <div class="col-md-6 ">
        <div class="box img_box" style='background-image: url("https://via.placeholder.com/800"); background-size: cover; background-position: center center;'>
        </div><!-- close box -->
      </div>

    </div>
  </div><!-- close container -->
</section>

<section class="">
  <div class="container">
    <div class="row">
      
      <div class="col-md-6 col-md-push-6 left-right-boxes">
        <div class="box content_box">
          <h2>Headline</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div><!-- close box -->
      </div><!-- close col -->

      <div class="col-md-6 col-md-pull-6">
        <div class="box img_box" style='background-image: url("https://via.placeholder.com/800"); background-size: cover; background-position: center center;'>
        </div><!-- close box -->
      </div>

    </div>
  </div><!-- close container -->
</section>

<section class="">
  <div class="container">
    <div class="row">
      
      <div class="col-md-6 left-right-boxes">
        <div class="box content_box">
          <h2>Headline</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div><!-- close box -->
      </div><!-- close col -->

      <div class="col-md-6 ">
        <div class="box img_box" style='background-image: url("https://via.placeholder.com/800"); background-size: cover; background-position: center center;'>
        </div><!-- close box -->
      </div>

    </div>
  </div><!-- close container -->
</section>

css

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

.left-right-boxes{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0;
  height:600px;
}

.box{
  text-align:center;
}
.content_box{
  width:100%;
  padding:80px 40px;
  background-color:#d5d2d2;
}

.img_box{
  height:600px;
}

[PaulOB]

Hi,

If you are going to use flex then lose the floats, push and pull row & col classes and the whole bootstrap3 structure and either roll your own flex layout or switch to bootstrap4 as that uses flex.

Assuming you are stuck with bootstrap3 then just write your own code for that section and get rid of the push and pull and column classes etc and use basic flex.

I’ve just adapted an old example to show the way.

Flex handles all the equal heights without needing to specify them and simplifies the whole structure.

[aaron4osu]

with flex, how do I make them stack on mobile or below 769 px? So the cells are 100% width? Also I removed the wrap class so that the images would go to the edge. But on the text side how can keep the cell at 50%, but make the inner text a max width 600px from the center so the text doesn’t go to the edges.

[PaulOB]

@aaron4osu

but make the inner text a max width 600px

In my example you could just set .cell p to max-width:600px but you could just add an extra div around the content if you have varied items in that section (like headings and lists perhaps). Give the div a class and set it to max-width:600px. In my example below I have set them to left and right aligned as that seemed to match your drawing.

@aaron4osu

with flex, how do I make them stack on mobile or below 769 px? So the cells are 100% width?

In your small screen media query change display:flex to display:block and they will stack vertically.

If you still want to move items around then leave it at display:flex but change the cells to 100% wide.

Note that as your background images are based on the height of the content then when you stack them vertically they will have no height so you will need to set an arbitrary height for those images.

Here’s a rough codepen re-jig with a media query added but there are many ways to go about this.