如何让HTML/CSS中food-div-desc-div随文本变长垂直拉伸？

要让food-div-desc-div随文本内容自动垂直拉伸，你可以从以下几个方面排查并修改：

• 检查父元素的高度限制
  确保food-div、food-div-link这些父容器没有设置固定高度（比如height: 400px），也不要设置overflow: hidden这类会截断内容的属性。父容器高度保持默认的auto，才能让子元素根据内容撑开。

• 修正<a>标签的显示类型
  默认<a>标签是行内元素，无法正确包裹块级子元素并自适应高度。给food-div-link添加display: block样式，让它变成块级元素：

  #food-div-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  

• 移除描述容器的固定高度设置
  确保food-div-desc-div和内部的food-div-desc都没有设置固定高度，保持默认的height: auto（不需要额外声明，只要没写固定height值就行）。如果之前写了height: fit-content无效，大概率是父元素的限制导致的。

• Flex布局适配（如果使用）
  如果food-div用了Flex布局，要设置flex-direction: column，让子元素垂直排列，同时不要给容器设置固定高度：

  #food-div {
    width: 300px; /* 可自定义宽度 */
    border: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    /* 不要设置固定height */
  }
  
  #food-div-photo-div {
    height: 200px; /* 图片容器可设固定高度 */
    background-color: #f5f5f5;
  }
  
  #food-div-header-div, #food-div-desc-div {
    padding: 12px;
  }
  

修改后，当food-div-desc内的文本增多时，food-div-desc-div会自动拉伸，带动整个卡片高度自适应。

内容的提问来源于stack exchange，提问作者FARUK CİHAN TOKER