Extra div causing the image height not scaling properly (display: flex)

Question

I took the code from here. The code is working well but when I added an extra div to wrap the div with class fullwidth, the images height does not scale equally depending on the height of the screen.

This is how it looks originally:

body,
html {
  height: 100%;
}

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

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

<div class="fullwidth">
  <div class="repeat-x bg-1">&nbsp;</div>
  <div class="repeat-x bg-2">&nbsp;</div>
  <div class="repeat-x bg-3">&nbsp;</div>
</div>

After wrapping fullwidth with another div :-

body,
html {
  height: 100%;
}

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

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

<div id="newid">
  <div class="fullwidth">
    <div class="repeat-x bg-1">&nbsp;</div>
    <div class="repeat-x bg-2">&nbsp;</div>
    <div class="repeat-x bg-3">&nbsp;</div>
  </div>
</div>

Gerrit Halfmann · Answer 1 · 2017-08-15T08:21:09.483

6

You can choose one of these to enlarge the #newid to the whole height of the current viewport:

#newid {
  height: 100vh; /* this is how you do it in 2017 */
  height: 100%;
}

For reference: I can highly recommend this post if you wan to dive deeper into css units: CSS Units - What is the difference between vh/vw and %?

edited Aug 15 '17 at 08:21

answered Aug 15 '17 at 07:17

Gerrit Halfmann

1,332
8
17

`100vh` only works when you explicitly want it to be the same height as the viewport - which is generally not desired if your container is nested within another container of partial height. – Bob Aug 15 '17 at 13:18
Thats true but it is not the case here as @kukkuz said: "the images height does not scale equally depending on the **height of the screen.**". – Gerrit Halfmann Aug 15 '17 at 13:35
Yup, I just thought it'd be best to be explicit about it in case someone browsing sees and thinks "ooh, 100vh is the fancy new replacement for 100%!". Then again, if they don't follow your link they probably won't read the comments either, soooo... – Bob Aug 15 '17 at 14:13

score 5 · Accepted Answer · answered Aug 15 '17 at 07:14

Add height: 100% to the newid container - this allows the flexbox to inherit the height of the document.

See demo below:

body,
html {
  height: 100%;
}

#newid {
  height: 100%;
}

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

.repeat-x {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.bg-1 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-2 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

.bg-3 {
  background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}

<div id="newid">
  <div class="fullwidth">
    <div class="repeat-x bg-1">&nbsp;</div>
    <div class="repeat-x bg-2">&nbsp;</div>
    <div class="repeat-x bg-3">&nbsp;</div>
  </div>
</div>

score 4 · Answer 3 · answered Aug 15 '17 at 07:12

4

Add this to your css:

#newid {
  height: 100%;
}

answered Aug 15 '17 at 07:12

Ivan Minakov

1,432
7
12

Extra div causing the image height not scaling properly (display: flex)

3 Answers3