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>

我认为它会对你有所帮助。