.main {
    height: 400px;
    width: 400px;
    background-color: beige;
}

.upper-div {
    height: 40%;
    width: auto;
    background-color: tan;
}

.lower-div{
    height: 60%;
    width: auto;
    display: grid;
    grid-template-rows: 1fr 36px 2fr;
}

.buttons {
    grid-row: 2 / 3;
    display: flex;
}

.btn {
    flex-grow: 1;
}

<div class="main">
        <div class="upper-div"></div>
        <div class="lower-div">
          <div class="buttons">
            <button class="btn">Button 1</button>
            <button class="btn">Button 2</button>
            <button class="btn">Button 3</button>
          </div>
        </div>
      </div>

一种方法是使用网格系统。在这个例子中，我创建了一个3行的网格，大小为1 fr（图中的1H）、36px和2fr（图中的2H）。之后，我创建了一个div来放置按钮，并将此div插入网格的第二行。

我想你可以用CSS网格实现这一点：

.main {
  display: grid;
  grid-template-rows: 4fr 6fr;
  height: 100vh;
  background: skyblue;
}

.upper-div {
  background: yellow;
}

.lower-div {
  background: bisque;
  display: grid;
  grid-template-rows: 1fr 36px 2fr;
}

.lower-div > button {
  grid-row: 2;
}

<div class="main">
  <div class="upper-div"></div>
  <div class="lower-div">
    <button class="btn-1">1</button>
    <button class="btn-2">1</button>
    <button class="btn-3">1</button>
  </div>
</div>