Bootstrap - 在保持高度和宽度的同时溢出列

Question

我正在尝试实现这样的目标：TW Bootstrap: How to overflow columns。基本上水平溢出列中的内容。但是发生的事情是我正在制作的内容没有保持指定的高度和宽度，它们只是相互堆叠

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

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

编辑

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

Answer 1

检查下面的截图：

*,
*: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>

我想它会对你有所帮助。