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;
    }
}

Is there a reason why your flex item and flex container are the same, declared in .content? Think you misunderstood something, there is always a flex container (display: flex) and the flex-items (flex: 1) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes — Honsa Stunna, Dec 01 '17 at 13:16

Asons · Accepted Answer · 2017-12-01T14:02:22.387

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>

score 2 · Answer 2 · answered Dec 01 '17 at 13:52

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>

score 1 · Answer 3 · answered Dec 01 '17 at 13:21

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>

You could use this answer and just cancel the 100% height with media queries: @media screen and (max-width: 768px) {.wrapper {height:auto;}} — Alvaro Menéndez, Dec 01 '17 at 13:32

Venu Madhav · Answer 4 · 2017-12-01T13:25:36.133

    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.

Thank you for reply but this is not what I am looking for, the content should just push background down like elements usually work. I guess I would need to set it up differently — Ivan Topić, Dec 01 '17 at 13:38

Flex children are being cut off on smaller screens

4 Answers4

Linked