css accounts for remaining height

Many times, we don't know the height of the container, but when we need to change it with its height, we can set display: flex;.

My requirement here is that the text on the right is returned by the backend. I don’t know its specific height, so the line on the left should change with the height of the text on the right. I have to lay it out in a large container like this
. Contains, two boxes on the left and right, lines on the left and text on the right

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

Here we use align-items: stretch and flex-grow: in display: flex . 1 Let’s talk about the code without saying much.

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