具有固定和可变元素的 Flex css 布局

Question

我希望在纯 CSS 中创建以下布局。我知道我可以使用 JavaScript 解决方案来实现这一点，但如果可能的话，CSS 解决方案会更简洁。

我创建了一个我知道不正确的 jsFiddle 来提供一个起点。我在 jsFiddle 中使用的 HTML 和 CSS 如下所示。

备注：

我希望它填满 window 的整个高度，这样页面就没有滚动条了（但请参阅我的最后一点）
有两个部分可以包含可变数量的元素。
红色元素是用户可以动态添加的图像，并且将被赋予一个具有固定宽高比的框架（此处显示为正方形）
绿色部分将包含一个至少包含一项的列表，因此它具有固定的最小高度。它最多可以有四个项目，所以它的高度可能会改变。我不想让这个部分滚动。如果用户使 window 太短以至于绿色和蓝色元素都无法显示完整高度，则整个页面将不得不滚动。

我的问题是：这可以在纯 CSS 中完成吗？如果您知道有一个解决方案，并且您可以提供一些关于如何实现它的指示，那么我可以继续朝着该解决方案努力。如果你知道无解，那我就干脆采用JavaScript的办法

如果有解决方案，并且您很乐意分享，那么我会很高兴您为我节省了很多时间。

<!DOCTYPE html>
<html>
<head>
    <title>Flex</title>
    <style>
body, html {
height: 100%;
margin: 0;
background: #000;
}
main {
width: 30em;
height: 100%;
margin: 0 auto;
background: #333;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.head{
width:100%;
-webkit-flex: 3em;
        flex: 3em;
background: #fcc;
}
.expand{
width:100%;
overflow:auto;
}
.filler {
width:100%;
height:20em;
background: #003;
border-bottom: 1px solid #fff;
}
.space {
width:100%;
height:10em;
border-bottom: 1px solid #fff;
}
.foot{
width:100%;
-webkit-flex: 0 0 2em;
        flex: 0 0 2em;
background: #cfc;
}

    </style>
</head>
<body>
<main>
  <div class="head">HEAD</div>
  <div class="expand">
    <div class="space"></div>
    <div class="filler"></div>
    <div class="space"></div>
  </div>
  <div class="foot">FOOT</div>
</main>
</body>
</html>

Answer 1

如果我理解的很好，

main {
    height: auto;
    min-height: 100%;
}
.head {
    min-height: 3em;
}
.foot {
    min-height: 2em;
}
.expand {
    flex-basis: 0; /* Initial height */
    flex-grow: 1; /* Grow as much as possible */
    overflow: auto;
}

body,
html {
  height: 100%;
  margin: 0;
  background: #000;
}
main {
  width: 20em;
  min-height: 100%;
  margin: 0 auto;
  background: #333;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.head {
  width: 100%;
  min-height: 3em;
  background: #fcc;
}
.expand {
  width: 100%;
  flex-basis: 0;
  flex-grow: 1;
  overflow: auto;
}
.filler {
  width: 100%;
  height: 20em;
  background: #003;
  border-bottom: 1px solid #fff;
}
.space {
  width: 100%;
  height: 2em;
  border-bottom: 1px solid #fff;
}
.foot {
  width: 100%;
  min-height: 2em;
  background: #cfc;
}

<main>
  <div class="head">HEAD</div>
  <div class="expand">
    <div class="space"></div>
    <div class="filler"></div>
    <div class="space"></div>
  </div>
  <div class="foot">FOOT</div>
</main>

具有固定和可变元素的 Flex css 布局

Flex css layout with fixed and variable elements

css

flexbox