水平滑动div内容并超过窗口限制

Question

I have the following code with two DIVs floating to right:

<div class="sample1"></div>
<div class="sample2"></div>

CSS:

.sample1,
.sample2 {
    height: 50vh;
    float: right;
    width: 50%;
}

Div "sample1" will get its width bigger by jQuery on a click event. Div "sample2" will break down, because it will exceed the window limit. What I need is to push "sample2" without breaking it down.

Any ideas about how is it possible with CSS only solutions?

Answer 1

Try using:

overflow-x:scroll;

As described here: http://www.w3schools.com/cssref/css3_pr_overflow-x.asp