将DIV保持在静态高度，但是在动态高度上面的那个

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在此HTML结构中，如何使height变小，具体取决于.additions？

例如，正如它在第一个例子中写的那样，它在一行中，现在我想要发生的事情是多行是.getsmaller高度变小并移动{ {1}}更高，有点像这样。

＆＃13;

＆＃13;

.addition

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为了清除它，我想让<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

的高度

Answer 1

您可以像这样使用flex：

＆＃13;

＆＃13;

void purchase(int money, string path = "")
{
    if (money == 0)
    {
        return;
    }
    if (money > 2)
    {
        string p = path + "C ";
        cout << p << "- ";
        purchase(money - 3, p);
    }
    if (money > 1)
    {
        string p = path + "B ";
        cout << p << "- ";
        purchase(money - 2, p);
    }
    string p = path + "A ";
    cout << p << "- ";
    purchase(money - 1, p);
}

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;