Flutter：如何实现最小高度可随内容扩展至最大高度的容器？

问题核心是你使用的Column默认属性mainAxisSize: MainAxisSize.max会强制占满父容器的可用空间，导致ConstrainedBox直接拉到最大高度200，完全忽略内容的实际长度。

修复方案 #

• 把外层Column的mainAxisSize改为MainAxisSize.min，让Column仅包裹内容的实际高度，这样ConstrainedBox就能正常工作：内容高度不足150时，自动用minHeight撑到150；内容超过200时，被maxHeight限制在200。
• 保留mainAxisAlignment: MainAxisAlignment.start，确保内容在容器内顶部对齐，避免因minHeight导致内容居中显示。
• 移除GestureDetector内部多余的Column（仅包含单个Container时无需嵌套Column），简化结构。

修改后的代码 #

@override
Widget build(BuildContext context) {
  return Card(
    margin: const EdgeInsets.all(8.0),
    color: Colors.white70,
    child: ConstrainedBox(
      constraints: const BoxConstraints(minHeight: 150.0, maxHeight: 200.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min, // 关键修改：让Column仅包裹内容高度
        mainAxisAlignment: MainAxisAlignment.start, // 确保内容顶部对齐
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                flex: 7,
                child: Container(
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  child: Text(
                    task.title,
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16.0,
                    ),
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                  ),
                ),
              ),
              Flexible(
                flex: 1,
                child: IconButton(
                    onPressed: () {
                      TaskStateWidget.of(context).deleteTask(id: task.id);
                    },
                    icon: const Icon(Icons.highlight_off)),
              ),
            ],
          ),
          GestureDetector(
            onTap: () => onTap(),
            // 移除多余的Column，直接使用Container
            child: Container(
              margin: const EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                task.description,
                style: const TextStyle(
                  fontSize: 15.0,
                ),
                overflow: TextOverflow.ellipsis,
                softWrap: true,
                maxLines: 8,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者sigmapie8