创建一个元素以占用剩余空间，而不使用flexbox

可以使用CSS的Grid布局来实现。Grid布局是一种二维布局系统，可以将页面划分为行和列，通过设置元素的位置和大小来实现布局。

要创建一个元素以占用剩余空间，可以使用Grid布局的自动布局特性。具体步骤如下：

1. 在父容器上应用Grid布局，可以通过设置父容器的display属性为grid来实现。

.container {
  display: grid;
}

1. 设置父容器的行和列的大小，可以使用grid-template-rows和grid-template-columns属性来定义行和列的大小。为了让元素占用剩余空间，可以使用fr单位来设置剩余空间的比例。

.container {
  display: grid;
  grid-template-rows: 1fr; /* 1行，占用剩余空间 */
  grid-template-columns: 1fr; /* 1列，占用剩余空间 */
}

1. 创建一个子元素，并设置其位置和大小。可以使用grid-row和grid-column属性来设置子元素所在的行和列。

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.child {
  grid-row: 1; /* 子元素所在的行 */
  grid-column: 1; /* 子元素所在的列 */
}

通过以上步骤，就可以创建一个元素以占用剩余空间，而不使用flexbox。

注意：以上示例中的.container和.child仅为类选择器示例，实际使用时请根据具体情况修改选择器。

关于Grid布局的更多详细信息和用法，可以参考腾讯云的相关文档和教程：

• CSS Grid 布局
• CSS Grid 布局教程