CODEWITHSUNDEEP
cssflexbox
Stepan Parunashvili
Stepan Parunashvili

Reputation: 2845

horizontally scrolling flex child

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.

Upvotes: 2

Views: 10414

Answers (3)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18843

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;
}

Upvotes: 5

RKichenama
RKichenama

Reputation: 384

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.

Upvotes: 0

Hunter Turner
Hunter Turner

Reputation: 6894

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

Upvotes: 6

Related Questions