make child divs display inline with 100% width and parent overflow scroll

问题

I've tried all day and can't seem to get this to work. Here is a fiddle so you can understand what I'm talking about: http://jsfiddle.net/P2BqP/

I am sure it can be done with no Java script, but i guess there is something i am missing here.
So I want to make the child divs take the value of the parent's min-width, so I can be able to horizontally scroll left or right, without having the parent expand.
The reason I am doing this is because I want a scalable carousel without having to have a set width for the parent and child elements. I would like it to be scalable no matter the screen size or if user maximizes window size.
Does this make sence?

回答1:

Simplified version, but should get you the general idea:

CSS:

#container {
    background-color:#CCC;
    min-width:50%;
    max-width:300%;
    overflow-x:scroll;
    white-space:nowrap;
    display: block;
}

#container div {
    border: 1px solid #006;
    white-space:nowrap;
    display: inline-block;
    width:100%;
}

http://jsfiddle.net/P2BqP/3/

回答2:

Thanks for the help, I actually ended up doing this: http://jsfiddle.net/P2BqP/13/ I was trying to make a carousel that wraps the text inside the child divs. Seems like i was trying a wrong approach.

来源：https://stackoverflow.com/questions/19519813/make-child-divs-display-inline-with-100-width-and-parent-overflow-scroll