Html 三行DIV的CSS，其中页眉和页脚的高度收缩为内容

我试图配置一个div元素，使它有3行，其中第一行和最后一行的高度与内容的高度相适应。中间的div将填充剩余的部分

我将我的方法建立在这里的一个示例上：但我不理解flex的增长/收缩/基础属性（如果这是正确的方法的话）

这就是我想要的：

这就是我现在对代码的立场：

我做了一些修改以使其按预期工作

.wrapper
现在是
flex-flow:column nowrap

.wrapper>*
不再具有
flex-grow
和
flex-basis

.main
具有
flex:1

将
.main
属性
flex
的值设为1，这样
.main
就会占用剩余的空间


.wrapper{
显示器：flex；
柔性流动：柱状nowrap；
字体大小：粗体；
文本对齐：居中；
高度：300px；
宽度：300px；
}
.wrapper>*{
填充：10px；
}
.标题{
背景：番茄；
}
.页脚{
背景：浅绿色；
}
梅因先生{
文本对齐：居中；
背景：深蓝；
弹性：1；
}
身体{
填料：2米；
}
斯迈利先生{
浮动：左；
}
kissymckissface先生{
浮动：对；
}
.外星人{
浮动：左；
}
.猴子{
浮动：对；
}

看起来像是、、的复制品，将flex-direction转换为column，flex-grow:1中只有main足以让布局正常工作。@G-Cyrillus是的，这就是我想要的。我试图删除，但不允许删除。版主或管理员将不得不这样做。这是有道理的。我从一个例子开始，这个例子有两个旁白（在contentdiv的左侧和右侧），但没有看到flex-flow属性。
 <div class="wrapper">
      <div class="header">
        <span class="smiley">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;
}