Html 向Div追加文本将Div扩展到初始CSS网格之外

我已经创建了一个基本的CSS网格，并将所有内容放置在我想要的位置。当我运行我的JS（将API调用中的信息附加到div）时，div的维度会推到视口边界之外。是否有一种方法可以防止整个身体元素发生变化，并让div动态增加高度

图片：

我尝试过很多不同的方法，但似乎都无法解决这个问题。我的退路是只覆盖div而不是附加到它。代码如下

//设置初始纬度和经度变量，以便以后使用
var-lat=0；
var-long=0；
//Google Geocode API用于查找TXT地址的纬度和经度
$（“#提交”）。在（“单击”，函数（）{
var userInput=$（“#txtAddress”）.val（）；
//将用户输入修剪为api所需的表单
var userSearchTerm=userInput.split（“”）.join（‘+’）；
//调用GoogleGeocodeAPI
变量queryURLGeocode=”https://maps.googleapis.com/maps/api/geocode/json?address=“+userSearchTerm+”&key=AIzaSyCSAYHZn9fz13c3bsl_RcS13HJu8wDJXCU”
$.ajax({
url:queryURLGeocode，
方法：“获取”
})
.完成（功能（响应）{
//从返回的对象设置纬度和经度
lat=响应。结果[0]。geometry.location.lat；
//将小数点限制为4（xx.xxxx）-api需要的格式
lat=lat.toFixed（4）；
long=响应。结果[0]。geometry.location.lng；
长=long.toFixed（4）；
//调用远足项目api
变量queryURL=”https://www.hikingproject.com/data/get-trails?lat=“+lat+”&lon=“+long+”&maxDistance=10&key=200206461-4fa8ac1aa85295888ce833cca1b5929f”
$.ajax({
url:queryURL，
方法：“获取”
})
.完成（功能（响应）{
//循环浏览响应跟踪并向站点添加信息
对于（i=0；i
html，
身体{
背景色：黑色；
利润率：10px；
}
h1，
h3{
颜色：白色；
文本对齐：居中；
填充物：5px；
线高：1px；
}
h1{
/*自动将小写文本更改为大写文本*/
文本转换：大写；
}
潜艇{
颜色：白色；
文本对齐：居中；
线高：1px；
字体大小：15px；
字体重量：较轻；
}
.集装箱{
显示：网格；
网格模板列：自动；
网格模板行：800px 500px 200px 50px 100px；
网格间距：3倍；
}
.container>div{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字号：1em；
}
.container>div:n个子项（1n）{
背景色：黑色；
}
.container>div:n个子项（2n）{
背景颜色：蓝色；
}
.container>div:n个子项（3n）{
背景色：红色；
}
.container>div:n个子项（4n）{
背景颜色：黄色；
}
.container>div:n子级（5n）{
背景颜色：绿色；
}
标签{
颜色：白色；
}
#主要{
背景图片：url（“资产/图片/etienne-bosiger-367964.jpg”）；
背景尺寸：封面；
背景重复：无重复；
}
#欧,，
#铬{
显示：块；
保证金：自动；
}
#群像{
填充：10px；
}

kairns®；
“找到你的踪迹”
输入地址：
搜寻
2.
关于我们

版权所有2018年
4.
动力
,
，及

如果应用以下命令，则
#搜索结果
元素的所有流入子元素将垂直对齐：

#search-results {
     display: flex;
     flex-direction: column;
}

请注意，网格容器中存在语法错误：
网格模板列：1000px，auto不应该有逗号。进行调整后，容器将变为两列，整个布局将发生更改。不确定这是否解决了您的主要问题，但您应该首先解决该问题。将
溢出：auto
添加到蓝色容器（
#搜索结果
）。这就是你想要的吗？@Michael_B，谢谢我编辑删除了“1000px”。所以现在它应该全部显示为一列
#搜索结果{overflow:auto；}
这绝对有帮助！但是有没有一种方法可以垂直而不是水平（现在，我的蓝色div添加了一个滚动条）试试这个：Add
display:flex；弯曲方向：立柱
到
#搜索结果
@Michael\u B，你太棒了！天哪！你不知道我试着解决这个问题多久了