CSS for a 3-row DIV where the header and footer shrink height to content

Question

I am trying to configure a div element so that it has 3 rows where the first and last rows' heights fit the height of content. And the middle div fills in the remaining.

I am basing my approach on one of the examples here: https://css-tricks.com/snippets/css/a-guide-to-flexbox but I am not understanding the flex-grow/shrink/basis properties (if that is even the correct approach).

This is what I want:

And here is where I stand with the code now: https://jsfiddle.net/CumminsJP/z0gvsyh5/

 <div class="wrapper">
      <div class="header">
        <span class="smiley"></span>
        <span>header</span>
        <span class="kissymckissface"></span> </div>
      <div class="main">


        <div>
          <p>
            content
          </p>
        </div>

      </div>

      <div class="footer">
        <span class="alien"></span>
        <span>footer</span>
        <span class="monkey"></span>
      </div>
    </div>

.wrapper {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;


  height: 300px;
  width: 300px;
}

.wrapper>* {
  padding: 10px;

  flex-grow: 1;
  flex-basis: 100%
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
  

}

.main {
  text-align: center;
  background: deepskyblue;
}


body {
  padding: 2em;
}


.smiley {
  float: left;
}

.kissymckissface {
  float: right;
}

.alien {
  float: left;
}

.monkey {
  float: right;
}

I suspect I'm only a few css properties from a solve, but could use an assist.

looks like a duplicate of, https://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486#25098486 , turning flex direction into column and only main in flex-grow:1 https://jsfiddle.net/0bL5x16r/ is plenty enough to make your layout work. — G-Cyrillus, Aug 04 '20 at 15:20
@G-Cyrillus yep, that's what i was after. i tried to delete but i'm not allowed to. a moderator or admin will have to do it. — Jay Cummins, Aug 04 '20 at 15:55

score 1 · Accepted Answer · edited Aug 05 '20 at 10:08

I made a few modifications to get it working as intended.

.wrapper is now flex-flow: column nowrap

.wrapper>* no longer has flex-grow and flex-basis

.main has flex: 1

Giving .main the property flex with a value of 1 is what lets .main take up the remaining space.

.wrapper {
  display: flex;
  flex-flow: column nowrap;
  font-weight: bold;
  text-align: center;


  height: 300px;
  width: 300px;
}

.wrapper>* {
  padding: 10px;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
  

}

.main {
  text-align: center;
  background: deepskyblue;
  flex: 1;
}


body {
  padding: 2em;
}


.smiley {
  float: left;
}

.kissymckissface {
  float: right;
}

.alien {
  float: left;
}

.monkey {
  float: right;
}

<div class="wrapper">
      <div class="header">
        <span class="smiley"></span>
        <span>header</span>
        <span class="kissymckissface"></span> </div>
      <div class="main">


        <div>
          <p>
            content
          </p>
        </div>

      </div>

      <div class="footer">
        <span class="alien"></span>
        <span>footer</span>
        <span class="monkey"></span>
      </div>
    </div>

That makes sense. I was starting with the example that had 2 asides (to the left and right of the content div) and missed the flex-flow property. — Jay Cummins, Aug 04 '20 at 15:23

CSS for a 3-row DIV where the header and footer shrink height to content

1 Answers1