css占剩余高度

在很多时候，我们不知道容器的高度是多少，但是我们需要随着他的高度而变化的时候，可以设置display：flex；.

我这里的需求是右侧的文字是后端返回的，不知道他的具体高度，所以左侧的线要随着右侧的文字的高度变化而变化
我得布局大致是这样的 一个大容器里包含，左右两个盒子，左侧是线，右侧是文字

<div class="container">  
  <div class="line"></div>  
  <div class="text">这里是文字内容</div>  
</div>

我们这里借助display: flex中的align-items: stretch 和 flex-grow: 1 话不多说 上代码

.container {  
  display: flex;  
  align-items: stretch;  
}  
  
.line {  
  width: 100%;  
  height: 1px;  
  background-color: #000;  
  flex-shrink: 0;  
}  
  
.text {  
  flex-grow: 1;  
  padding-left: 10px; /* 根据需要调整左侧内边距 */  
}