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

You haven't closed any of your div tags and your css brackets don't match — c2huc2hu, Nov 24 '17 at 16:51

score 1 · Answer 1 · answered Nov 24 '17 at 17:02

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.

yeah I'm having trouble with bootstrap columns I think I'll just resort to flexboxes — , Nov 24 '17 at 17:06

Bootstrap - overflow columns while keeping the height and width

1 Answers1