중첩 된 div, 외부 쪽에서 오버플로 스크롤, 내부 쪽이 잘림

Question

일부 중첩 된 <div>이 있습니다. 바깥 쪽 <div>에는 overflow-x: scroll이 있고, 안쪽에는 긴 텍스트가 있습니다 (랩하지 않으려 고합니다). 문제는 "내부"<div>이 실제로 스크롤 영역으로 확장되지 않는다는 것입니다. 예를 들어 이벤트가 각 내부 <div>에 바인딩 된 경우 오른쪽으로 스크롤 한 다음 아무 곳이나 클릭하면 해당 이벤트가 실행되지 않습니다. 내 샘플에서 빨간색 영역은 <div> 내부의 일부이며 파란색 영역이 없습니다 (파란색 영역의 아무 곳이나 클릭하면 실행되지 않습니다).

(fiddle)

샘플 HTML :

<div class="outer"> 
    <div class="inner">one long element right here</div> 
    <div class="inner">two long element right here</div> 
    <div class="inner">three long element right here</div> 
</div> 

그리고 몇 가지 간단한 CSS :

.outer { 
    width: 15ex; 
    overflow-x: scroll; 
    background-color: blue; 
} 

.inner { 
    white-space: nowrap; 
    background-color: red; 
} 

(색상은 설명을위한 것입니다)

Answer 1

가 난 단지 크롬이 시도 , 그러나 그것은 작동했다 :

.inner { 
    background-color: red; 
    white-space: nowrap; 
    display: table-row; 
} 

http://jsfiddle.net/tGkdn/5/

나는 거의 당신에게 난 그냥 크로스 브라우저 아닌 경우에 여기에 게시합니다 자바 스크립트 수정을했다.

var inner = document.querySelectorAll('.inner'); 
for (var i = 0, l = inner.length; i < l; ++i) { 
    inner[i].style.width = inner[i].parentNode.scrollWidth + 'px'; 
} 

Answer 2

필수 jQuery를 대답 :이 바이올린 HTTP를 살펴 ... 오른쪽으로 스크롤하면 실제로

Working Example

$(function() { 
    $('.outer').scroll(function() { 
     $('.inner').width($('.outer').width() + $('.outer').scrollLeft()); 
    }); 

    $('.inner').click(function() { 
     $(this).css('background', 'green'); 
    }); 
});