CSS representa la altura restante

Muchas veces no sabemos la altura del contenedor, pero cuando necesitamos cambiarla con su altura, podemos configurar display: flex;.

Mi requisito aquí es que el texto de la derecha sea devuelto por el backend. No sé su altura específica, por lo que la línea de la izquierda debería cambiar con la altura del texto de la derecha. Tengo que diseñarlo en Un contenedor grande como este
contiene dos cuadros a la izquierda y a la derecha, líneas a la izquierda y texto a la derecha.

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

Aquí usamos align-items: stretch y flex-grow: in display: flex 1. Hablemos del código sin decir mucho.

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