Horizontal scroll of elements (100% width) inside parent element with percentage width value [duplicate]

Question

I'm using Bootstrap3 for creating pages in my application.

Somewhere deep in a page I have the column (col-md-6), which width is calculated by percentage. My current goal is to fill that element with a set of child elements, respecting following rules:

1. height of each child element must be inherited from the parent element;
2. width of each child element must be equal to width of the parent element;
3. child elements must be placed horizontally;
4. parent element must have horizontal scroll to navigate thru elements.

If we use fixed values (in px), the task becomes pretty easy. Like here http://jsfiddle.net/vUEYG/

But I have no idea how to solve it with percentage values. I mean, ok I can add some wrapper element with width equal to N*100% (where N is the number of child elements). But then the question is how to set width of child elements to those 100%? :)

Could someone give an advice?

Thank you

Answer 1

If I have understood your requirements, I believe you can use flex-box to achieve this.

Note that there is no bootstrap used to achieve this, just straight css. If interested, there is a rather thorough breakdown of flex-box here.

#mask {
  display: block;
  height: 100px;
  width: 100%;
  overflow-x: scroll;
}

content {
  display: flex;
  align-content: flex-start;
  width: 200%;
  height: 100%;
}

content > div {
  flex-grow: 1;
  height: 100%;
  background-color: #f00;
  border: 1px solid #fff;
}

<div id="mask">
  <content>
    <div></div>
    <div></div>
  </content>
</div>