html - Flex切断子项

我有以下代码结构

.parent {
  display: flex;
  flex-direction: column;
}

.img {
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}
.container {
  border: 1px solid;
  display: flex;
  flex-direction:column;
  margin:20px;
}

<div class="parent">
  <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg"/>
  <div class="content">
  </div>
  <div class="footer">
    <div class="container">
       <div><button>Button1</button><div>
       <div><button>Button2</button><div>
    </div>
  </div>
</div>

我想要的是页脚占据其原始宽度和高度（高度：144px），并根据屏幕分辨率根据可用空间滚动内容。当前，页脚在某些屏幕上已被切断。我已经尝试过更改内容和页脚的flex值，但这是行不通的。

最佳答案

如果要将父级限制为屏幕的高度，以便始终显示页脚，则需要在div（以及body和html）上将高度设置为100％，并将图像移入内容容器中（或如果屏幕太大，则会滚动一个单独的屏幕）

body,
html {
  margin: 0;
  height: 100%;
}

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

img {
  display:block;
  width: 100%
}

.content {
  flex: 1;
  overflow-y: scroll;
}

.container {
  border: 1px solid;
  display: flex;
  flex-direction: column;
  margin: 20px;
}

<div class="parent">
  <div class="content">
    <img src="https://www.everythingcarers.org.au/media/1982/sample.jpg" />
  </div>
  <div class="footer">
    <div class="container">
      <div><button> Button1 </button></div>
      <div><button> Button2 </button></div>
    </div>
  </div>
</div>

关于html - Flex切断子项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55062071/