html - 将 DIV 保持在静态高度，但其上方的 DIV 处于动态高度

Question

.getsmaller {
    display: block;
    width: 1000px;
    height: 150px;
    background: red;
}

<div class='getsmaller'></div>
<div class='additions'>
    Lorem ipsum dolor sit amet
</div>

在这个 HTML 结构中，如何使 height 根据 .additions 变小？

例如，正如第一个示例中所写的那样，它在一行中，现在当它超过一行时我想要发生的是使 .getsmaller 高度变小并将 .addition 移到更高的位置，像这样。

.getsmaller {
    display: block;
    width: 1000px;
    height: 120px;
    background: red;
}

<div class='getsmaller'></div>
<div class='additions'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

为了稍微清除它，我想将 .addition 保留在它的位置并让它变得更高，而不是向下移动。但是只改变.getsmaller

的高度

Answer 1

你可以像这样使用 flex:

body { /* I used the body as the main container but it can be any other element*/
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.getsmaller {
  flex: 1; /* this will make the div take the remaining spaces so it will get smaller when the cotnent of the other grow*/
  background: red;
}

<div class='getsmaller'></div>
<div class='additions'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>