Bootstrap - overflow columns while keeping the height and width

Question

I'm trying to achieve something like this: TW Bootstrap: How to overflow columns. Essentially overflow horizontally content in a column. But what's happening is the content that I'm making doesn't keep the specified height and width and they just stack on each other

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

How do I keep the width and height of contents inside and not stack on each other?

EDIT

Here's what I'm trying to achieve. Please don't mind the "span" arrow

Answer 1

Check the snipped below:

*,
*:afrer,
*:before{
  box-sizing: inherit;
}
html{
  box-sizing: border-box;
}
.horizontal-scroll{
  border: 1px solid black;
  background-color: white;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  overflow-x: auto;
  overflow-y: auto;
  width: 500px;
}
.horizontal-scroll-item{
  align-items: center;
  background-color: green;
  border: 5px solid yellow;
  border-radius: 2px;
  color: white;
  display: flex;
  flex-direction: row;
  flex: 0 0 250px;
  font-size: 13px;
  justify-content: center;
  margin-right: 15px;
  max-width: 250px;
}

<div class="horizontal-scroll">
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
  <div class="horizontal-scroll-item">Horizontal Item</div>
</div>

I think it will help you.