html - 将所有内容放入静态flex列中 | 将所有内容放入静态flex列中

我试图在非滚动列flexbox的视图范围内适应4格，但我似乎无法使其正常工作。

我想要的是：

我的经验：

我不知道我在做什么，只是随机排列与flex相关的CSS字段以尝试修复它。如果有人指出错了，我将永远爱你。

这是我的代码的要点：

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>

最佳答案

请在下面尝试。如果图像没有按预期缩放或纵横比变化，则使用object-fit。

#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>

关于html - 将所有内容放入静态flex列中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59440926/