Flex children are being cut off on smaller screens

Question

In my code below, .content has flex properties, but on small screen looks cut out.

I wouldn't like to set fixed size because the text can become even bigger.

Basically, the background image should go full height on big screens while textual content on the right is in center.

On small screens the text should be first and normally visible while background goes after it.

How to solve this on smaller screen so that content is normally visible and pushes background after it? Here is the example https://codepen.io/anon/pen/YEdjQb?editors=1100 (adjust screen)

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

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

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

Answer 1

There are 3 main things you need to fix:

• change wrapper to a minimum height (here I used viewport units) so it can grow with content and be properly scrollable

• add height: 600px; (or the height you want) to .background for smaller screen or else it will collapse when on smaller screen, as it no longer will stretch to fit as it does on wider screen

• add (moved) flex: 1; to .background when on wider screen so content/background share the width equal

Why the need of the height: 600px; for narrower screen is, that a background-image on a div won't size its element like an img does.

Updated codepen

Stack snippet

body {
  margin: 0;
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;              /*  changed  */
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  height: 600px;                  /*  added  */
  order: 2;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    height: auto;                 /*  added  */
    flex: 1;                      /*  moved  */
    order: 1;
  }
  .content {
    order: 2;
  }
}

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 2

Instead of height: 100%, which limits the size of the .wrapper to the height of the viewport, use min-height: 100vh, which allows the container to expand, as necessary.

Then, because elements that are children of a flex container become flex items, change the CSS background image to an actual HTML img so it can accept flex properties.

revised codepen

body {
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.background {
  order: 2;
  padding: 1em;
}

.content {
  flex: 1;
  order: 1;
  padding: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (min-width: 768px) {
  .wrapper    { flex-direction: row; }
  .background { order: 1;            }
  .content    { order: 2;            }
}

<div class="wrapper">

  <div class="background">
    <img src="http://via.placeholder.com/800x600">
  </div>

  <div class="content">

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>

Answer 3

    html, body, .wrapper {
    padding: 0;
    margin: 0;
}

body {
    font: 1rem / 1.516 'Open Sans', sans-serif;
    background-color: #fff;
    color: #232323;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100vh;
}

.background {
    background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;    
    display: flex;
    flex: 1;
    order: 2;
    padding: 1em;
}

.content {
    flex: 1;
    order: 1;
    padding: 3em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

@media screen and (min-width: 768px) {
    .wrapper {
        flex-direction: row;
    }
    .background {
        order: 1;
    }
    .content {
        order: 2;
    }
}

you can see codepen

You can give scroll to the content when it will get cut the text.

Or you can give box-sizing: border-box;

html, body, .wrapper {
    padding: 0;
    margin: 0;
  height: 100%;
  box-sizing: boxder-box;
}

Because it will calculate in 100% padding also.

Answer 4

Don't use height:100% to the wrapper.

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font: 1rem / 1.516 'Open Sans', sans-serif;
  background-color: #fff;
  color: #232323;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.background {
  background: url('http://via.placeholder.com/800x600') no-repeat center center/cover;
  flex: 1;
  order: 2;
  padding: 5em;
  height: 100%;
}

.content {
  order: 1;
  padding: 3em;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .wrapper {
    flex-direction: row;
  }
  .background {
    order: 1;
  }
  .content {
    order: 2;
  }
}

<div class="wrapper">

  <div class="background">
  </div>

  <div class="content">

    <div class="logo_wrapper">
      <img src="assets/logo.png" alt="Ime firme">
    </div>

    <div class="content__podaci">
      <h1>What is Lorem Ipsum?</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <h2>Title></h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      <h2>Something</h2>
      <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>