1

Consider the following example:

HTML

<div id="body">
  <div id="container">
    <div id="item-1"></div>
    <div id="item-2"></div>
  </div>
</div>

CSS

#body {
  height: 500px;
  width: 500px;
  background-color: yellow;
  overflow: scroll;
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#item-1 {
  background-color: red;
  width: 200px;
  height: 100px;
}

#item-2 {
  background: linear-gradient(to right, black, white);
  width: 1000px;
  height: 100px;
}

see also https://jsfiddle.net/nfzo3xfj/5/

I have a flex container with two items as a centered column. These items can grow larger than the surrounding <div> element, so I want to use overflow: scroll to enable scrolling in that case. However, scrolling only works in one direction (to the right side). How can I enable scrolling towards the left (black) side of the second item as well?

jfrohnhofen
  • 167
  • 9
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D Oct 30 '17 at 15:48
  • Also `overflow:overlay` is non-standard and not supported outside of Webkit – Paulie_D Oct 30 '17 at 15:49
  • 1
    https://stackoverflow.com/a/38830775/3597276 – Michael Benjamin Oct 30 '17 at 16:22

0 Answers0