position:fixed no scroll bars appearing

Question

I have a <div> which is positioned with position:fixed. When the window is too small horizontally to fit the div, no scroll bars appear, the right hand side of the div is simply cut off.

If I change to position:absolute, the scroll bars appear as normal.

Is there any way of making the browser recognise the size of the div and the need for scrolling whilst still using position:fixed?

Note: there is another div with default position declared before the fixed div.

Answer 1

Scrollbars are simply incompatible with a fixed position, logically. If you tell the user-agent to fix something, you should not expect scrollbars as they would move the something. Why don't you use position: absolute as it appears to work for your example?

Edit:
@Horizontally-scrollable div: From the top of my head, I'd go about something along the lines of the following css (NOTE: I have not tested this, and it is only supposed to give you a rough idea)

#myContentWrapper {
  position: absolute; /* here, fixed or relative may work too*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: scroll; /* also, try auto */
}
#myContentWrapper #myContent {
  width: 5000px; /* example */
}

With this, if you nest a div tag with id="#myContent" within id="$myContentWrapper", I believe it may do what you are looking for.

The difference to your approach is, that the nested element is large, and the parent element is absolute/fixed/whatever.