SOURCE

<div class="container">
  <div class="text">
    Lorem ipsum dolor  dipiscing elit.
  </div>
  <div class="text">
    Lorem ipsum dolor  dipiscing elit.
  </div>
</div>


<p>clamp + calc </p>

<div class="g-container2">
    <div class="g-content2" style="margin-bottom:calc(100% - 200px)">
        Lorem ipsum dolor s...
    </div>
</div>



<p>容器查询</p>
<div class="g-container">
    <div class="g-content">
        Lorem ipsum dolor s...
    </div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直顶部对齐 */
  height: 100px; /* 容器高度 */
  border: 1px solid #000; /* 边框仅为了展示效果 */
}
 
.text {
  text-align: left; /* 文本左对齐 */
  margin: auto; /* 上下自动边距实现居中 */
}

/* 方法一：借助最新的容器查询 */

.g-container {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #999999;
    resize: vertical;
    overflow: hidden;
}

.g-content {
    height: 100%;
}

.g-content::before {
    content: "↑";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}

.g-container {
    container-type: size;
    container-name: container;
}

@container container (height <=260px) {
    .g-content::before {
        opacity: 0;
    }
}


/* 方法二：clamp + calc 大显神威 */

.g-container2 {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #999999;
    resize: vertical;
    overflow: hidden;
}

.g-content2 {
    height: 100%;
}

.g-content2::before {
    content: "↑";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    /* clamp() 函数的作用相当于min()和max()的结合，它接收三个参数：最小值、首选值、最大值clamp(MIN, VAL, MAX)， */
    /* 可以将当前值控制在一个闭区间内。 */
    /* bottom: clamp(-99999px, calc(calc(100% - 200px) * 100000), 10px); */
    bottom:clamp(-99999px,calc(calc(100% - 200px)*10),10px);
}