3 열 - 오버플로 요소가있는 가운데 열 유체

Question

3 열 웹 사이트가 있습니다. 외부 열은 고정되어 있고, 중간 열은 유동적입니다. 나는

<div style="display:table"> 
    <div style="display:table-row"> 
     <div style="display:table-cell"> 
     </div> 
     <div style="display:table-cell"> 
     </div> 
     <div style="display:table-cell"> 
     </div> 
    </div> 
</div> 

(전체 코드에 대한 jsfiddle 참조)

지금은 중간 열에 너무 넓이 될 수있는 요소가 이것을 구현했습니다.

overflow:auto 

이 표시되므로 스크롤 바가 표시됩니다.

편집 :
이 작동하지 않습니다 죄송합니다 : http://jsfiddle.net/WtWCC/
작업 않습니다 크롬 http://jsfiddle.net/WtWCC/2/

설명 : 스크롤까지 "+"에 클릭을 제공 한 예에서
이 나타납니다 (더를 당신은 더 명확하게 문제를 클릭). 스크롤바가있는보기는 내가 좋아하는 것입니다 : 가운데 열이 최대화 된 2 개의 고정 열이 표시됩니다.

이제 브라우저의 크기를 조정하십시오. (또는 jsfiddle 창)

이제 중간 열이 훨씬 커집니다. 오른쪽 열이 숨겨집니다.

누구든지이 문제에 대한 해결책을 알고 있습니까?

미리 감사드립니다.

편집 : 설명 된 동작은 Chrome에 있습니다. IE와 Firefox에서는 Overflow : auto가 전혀 작동하지 않습니다.

Answer 1

JSFiddle에 문제가있어 미안하지만 도움이되지 않는다면 죄송합니다.

HTML :

<div class="wrap"> 
    <div class="left"> 
    Leftees 
    </div> 
    <div class="right"> 
    Righties 
    </div> 
    <div class="middle"> 
    Middies 
    </div> 
</div> 

CSS :

.wrap{ 
    width:100%; 
    overflow:hidden; 
} 
.left{ 
    float:left; 
    background:red; 
} 
.middle{ 
    overflow:hidden; 
    background:green; 
} 
.right{ 
    float:right; 
    background:yellow; 
} 

jsfiddle