Css 引导-溢出列，同时保持高度和宽度

我正在努力实现这样的目标：。实质上是在列中水平溢出内容。但是我正在制作的内容没有保持指定的高度和宽度，它们只是堆叠在一起

CSS

.person-details-container {
  display: flex;
  overflow-x: hidden;

  .person-details {
    width: 267px;
    height:215px;
  }
}

HTML

<div class="container person-details-container">
 <div class="row">
  <div class="col-xs-12">
   <div class="person details">
    <div class="el-card">
     some card info 1 with a set width and height
    <div class="el-card">
     some card info 2 with a set width and height

某些卡片信息1具有设置的宽度和高度
某些卡片信息2具有设置的宽度和高度

如何保持内容的宽度和高度在内部，而不是相互堆叠

编辑

以下是我想要实现的目标。请不要介意“跨度”箭头

---

检查以下剪下的部分：

*，
*当前位置：，
*：之前{
框大小：继承；
}
html{
框大小：边框框；
}
.水平卷轴{
边框：1px纯黑；
背景色：白色；
边界半径：4px；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
对齐项目：拉伸；
调整内容：灵活启动；
高度：600px；
左边距：自动；
右边距：自动；
填充：20px；
溢出-x：自动；
溢出y：自动；
宽度：500px；
}
.水平滚动项{
对齐项目：居中；
背景颜色：绿色；
边框：5px纯黄色；
边界半径：2px；
颜色：白色；
显示器：flex；
弯曲方向：行；
柔性：0 250像素；
字体大小：13px；
证明内容：中心；
右边距：15px；
最大宽度：250px；
}

水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项

检查下面被剪断的部分：

*，
*当前位置：，
*：之前{
框大小：继承；
}
html{
框大小：边框框；
}
.水平卷轴{
边框：1px纯黑；
背景色：白色；
边界半径：4px；
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
对齐项目：拉伸；
调整内容：灵活启动；
高度：600px；
左边距：自动；
右边距：自动；
填充：20px；
溢出-x：自动；
溢出y：自动；
宽度：500px；
}
.水平滚动项{
对齐项目：居中；
背景颜色：绿色；
边框：5px纯黄色；
边界半径：2px；
颜色：白色；
显示器：flex；
弯曲方向：行；
柔性：0 250像素；
字体大小：13px；
证明内容：中心；
右边距：15px；
最大宽度：250px；
}

水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项
水平项

Snippet.done。我添加了一个代码段，您没有关闭任何div标记，css括号与代码段不匹配。请完成。我添加了一个代码段你没有关闭任何div标记，css括号不匹配耶，我在引导列方面遇到了问题我想我会求助于flexboxes耶，我在引导列方面遇到了问题我想我会求助于flexboxes