Javascript 在内容超过div的高度后扩展div的宽度

我最近一直在学习CSS flex，并尝试使用它执行一些简单的任务。其中一项任务是制作一个时间表，其中交替的元素位于中线之上或之下

我希望能够设置一个初始宽度和一个固定高度，这样当内容超过div的高度并溢出时，宽度将扩展以容纳内容，希望不会出现溢出

div的内容
div的内容
div的内容
div的内容
div的内容
.内容{
显示器：flex；
}
.盒子{
显示器：flex；
弯曲方向：立柱；
}
.上，.下{
高度：350px；
显示器：flex；
最小宽度：300px；
边框：1px实心#000；
}
.以上{
显示器：flex；
对齐项目：柔性端；
背景：橙色；
}
.以下{
显示器：flex；
调整项目：灵活启动；
背景：水；
}

我知道这可能是一个简单的解决方案，它正盯着我看，但我已经尝试了最大宽度、最大高度、溢出和包装文本的所有方法，但到目前为止，没有任何方法可以帮助我达到预期的结果

---

我真的很感激任何帮助。谢谢

如果列数是静态的，则可以从上面的

、下面的
中删除
最小宽度

添加
最小宽度：2700px
到
.content
您可以使用以下JS动态更改元素：

var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
  if(Ele.scrollHeight > 350){
    Ele.style.minWidth = (Ele.scrollHeight) + "px";
  }
});

它在所有元素中循环使用下面的类
和上面的类
，然后检查它使用的高度是否超过
高度：350px
，如果它是>
350px
，那么它将相应地进行调整

只需在codepen JS编辑器中添加上述JS代码，就可以了。尝试向其中添加更多内容，它将动态地更改宽度，而不会溢出。
我可能应该声明，内容中的框元素数量可以继续动态增长，并在需要时不断增长。我并不打算让它包含大量静态元素，这只是一个例子。谢谢你。
var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
  if(Ele.scrollHeight > 350){
    Ele.style.minWidth = (Ele.scrollHeight) + "px";
  }
});