Fitting everything within a static flex column

Question

I am trying to fit 4 divs within the view bounds of a non-scrolling column flexbox but I can't seem to get it working.

What I want:

What I experience:

I have no idea what I am doing and just randomly permutating flex-related CSS fields to try and fix it haha. If someone could point out what is wrong I would love you forever.

Here is the gist of my code:

body {
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 100%;
}

#flexcontent {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
#header #firstContent #secondContent {
  flex: 1 1 auto;
}
#header {
  background-color: green;
      font-weight: 700;
    align-content: center;
    font-size: 7rem;
}
#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}
#picture {
  background-color: blue;
  flex: 0 1 auto;
}

<body>
  <div id="flexcontainer">
    <div id="header">Title</div>
    <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg"/></div>
    <div id="firstContent">first</div>
    <div id="secondContent">second</div>
  </div>
</body>

Sorry, done. I think this example captures it. I want all 4 divs visible and the image shrinking. — Samuel Davidson, Dec 22 '19 at 01:13
Note that the `id` for the container doesn't match in the HTML and CSS. — Michael Benjamin, Dec 22 '19 at 01:41

Stickers · Answer 1 · 2019-12-22T02:12:23.573

Try this below. And use object-fit if image doesn't expand or shrink as expected or aspect ratio changes.

#flexcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#picture {
  flex: 1;
  min-height: 0;
}

body {
  margin: 0;
}

img {
  object-fit: contain;
  height: 100%;
  width: auto;
}

<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>

Vishnu Prasad · Answer 2 · 2019-12-22T01:26:54.297

0

Please check your container div id

<div id="flexcontainer">

change

#flexcontent {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

to

#flexcontainer {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
}

try object-fit for img

img {
 object-fit: contain;
 height: 100%;
}

edited Dec 22 '19 at 01:26

answered Dec 22 '19 at 01:20

Vishnu Prasad

1
1

score 0 · Answer 3 · answered Dec 22 '19 at 01:46

there is a few thing to fix in your CSS, typo and value used

html, /* to inherit height */
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#flexcontainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0; /* force size calculation*/
}
#header,/* you meant each one of them */
#firstContent,
#secondContent {
  flex: 1;
  margin: 2px 5vw;/* for demo */
}
#header {
  background-color: green;
  font-weight: 700;
  /* align-content: center; or did you forget display:flex here */
  font-size: calc(1rem + 2vw);
}
#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}
#picture { 
  display: flex;
  min-height: 0; /* force size calculation*/
}
img {
  max-height: 90%;/* whatever */
  margin: auto;/* or align-content + justify-content : center on  flex parent*/
}

<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>

score 0 · Answer 4 · answered Dec 22 '19 at 01:51

Allow the item holding the image to shrink below its content size.

Define the parameters of the image.

(Tested in Chrome, Firefox and Edge.)

#flexcontainer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#picture {
  min-height: 0;
  background-color: blue;
}

#picture>img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#header {
  background-color: green;
  font-weight: 700;
  font-size: 7rem;
}

#firstContent {
  background-color: red;
}

#secondContent {
  background-color: yellow;
}

body {
  margin: 0;
}

<div id="flexcontainer">
  <div id="header">Title</div>
  <div id="picture"><img src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" /></div>
  <div id="firstContent">first</div>
  <div id="secondContent">second</div>
</div>

jsFiddle demo

symlink · Answer 5 · 2019-12-22T04:14:24.120

I've tidied up your html a little and simplified the CSS. You want to take the overflow: hidden off of the body tag, and give each of your elements a class instead of an id. Finally, simplify the image section by making the image tag itself a flexbox item:

html,
body {
  height: 100%
}

body {
  /*overflow: hidden;*/
  margin: 0;
}

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

.flexContainer__header,
.flexContainer__firstContent,
.flexContainer__secondContent {
  flex: 1 1 auto;
}

.flexContainer__header {
  background-color: green;
  font-weight: 700;
  align-content: center;
  font-size: 7rem;
}

.flexContainer__firstContent {
  background-color: red;
}

.flexContainer__secondContent {
  background-color: yellow;
}

.flexContainer__picture {
  display: block;
  width: 100%;
}

<div class="flexContainer">
  <div class="flexContainer__header">Title</div>
  <img class="flexContainer__picture" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall-1140x760.jpg" />
  <div class="flexContainer__firstContent">first</div>
  <div class="flexContainer__secondContent">second</div>
</div>

This doesn't quite work. Te image should shrink to fit the lower 2 divs. From what I can tell the image remains a static size in this example. — Samuel Davidson, Dec 22 '19 at 04:06
@SamuelDavidson see my edit. Just remove the flex property from the image and set it to 100% — symlink, Dec 22 '19 at 04:15

Fitting everything within a static flex column

5 Answers5

jsFiddle demo