2

I have been scowering the web, but can not seem to get a solution to work.

Here is an example codepen:

http://codepen.io/anon/pen/Wxjjqp

.container {
  display: flex;
}

.horizontally-scrolled-items {
  display: flex;
  background: lightblue;
  overflow-x: scroll;
}
.item {
  width: 1000px;
  border: 1px solid blue;
}

html:

<div class="container">
  <div class="horizontally-scrolled-items">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
  </div>
  <div class="aside">
    <button>keep me on screen</button>
  </div>
</div>

The idea is for horizntally-scrolled-items to be flex:1. If the items are greater than the width of the container, for them to scroll, leaving aside in the view.

3 Answers 3

6

You can achieve this with min-width. Give your .item class a min-width with a flex-grow: 1;. Then set your .horizontally-scrolled-items div to width: 100%;.

CSS

.horizontally-scrolled-items {
  width: 100%;
}

.item {
  min-width: 400px;
  flex-grow: 1;
}

CodePen

5

With Flex box

.horizontally-scrolled-items {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.item {
  flex: 0 0 auto;
}

Without Flex box

.horizontally-scrolled-items {
   overflow-x: scroll;
   overflow-y: hidden;
   white-space: nowrap;
}
.item {
   display: inline-block;
}
0
0

Another way is to set the items with and flex: 0 0 auto which is short hand for flex-grow: 0; flex-shrink: 0, so flexbox does not try to resize the items.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.