디스플레이의 내용 오버플로 : 인라인 블록; 왜, 어떻게?

Question

이 설치 갖는

<div> 
    <label>...</label><br /> 
    <!-- repeat several times --> 
</div> 

div { 
    display:inline-block; 
    overflow:auto; 

    max-height:3em; /* short enough to cause overflow */ 
    /* or, in Chrome, this works too: */ 
    padding:1ex; 
} 

가 크롬과 파이어 폭스가 생산하는 원인이됩니다 수평 스크롤 : 오페라는 오페라 프레스토하지 오페라 것을

JSFiddle

힐끔 보다. 버려 졌어.

어쨌든 왜 이런 일이 발생합니까? max-height (자동 오버플로)과 padding이 모두 필요하다면 어떻게 수평 스크롤 막대를 없앨까요?

P. 그게 중요한 일이라면 나는 XP 머신 (회사 제한)을 사용하고있다.

PS # 2 또한 테스트 margin<label>에의 해제하는 파이어 폭스에서 수평 스크롤을두고 있음을 보여 주지만, 컨텐츠합니다 (조잡 3 자 길이 (짧은 라벨) 약 2 문자를 줄이려고 줄일 것 스크롤 바의 폭).

---

업데이트 # 2 : 경우 사람에

모호한 느낌 :

왜 컨테이너 <div>가 (이 경우 3 문자)을 자식의 짧은 길이로 축소 할 스크롤바를 제외한 Chrome 및 Firefox의 콘텐츠 너비를 확장하여 긴 자식을 오버플로 할 수 있습니까?
어디에도 길이 정보가 없으므로 여기에 어떤 논리가 있습니까? 의도적으로 "Zero"를 추가하여 첫 번째 자식이 가장 짧은 자식이 아니지만 여전히 동일한 결과를 얻었습니다.

Opera Presto는 예상대로 작동하지만 실제로는 사실상 표준으로 보이지 않습니다.

그리고 최대 높이와 ​​자동 스크롤을 유지하면서 <div>의 크기를 확장해야하는 이유는 무엇입니까?

---

업데이트 # 1 :

스크롤의 직접적인 원인이 수평 오버 플로우 코스 내용이다, 그래서 잔인 <div>에 overflow-x:hidden을 적용 할 경우, 결과는 단순히이 될 것입니다 :

---

업데이트 # 3 :

덕분에 @SergiyT.

JSFiddle

내용은 오버 플로우 - 에드있다 (이 "오른쪽"경우 잘 모르겠어요 : 크롬과 파이어 폭스가 아닌 짧은 아이 스크롤을 처리하는 방법을,이 밝혀 가장 긴 아이가 나타나기 전에), 그러나 이것은 막 다른 골목처럼 보인다.

Answer 1

을 시도 도움이 될 수 있습니다. 오페라 (어쩌면 IE도)는 스크롤바없이 너비/높이를 고려하지만 파이어 폭스와 크롬은 스크롤바를 고려합니다. 화면 캡처에서 Opera의 너비가 Firefox 및 Chrome보다 큽니다.

Answer 2

이 브라우저 스크롤바와 함께 작동하는 방법 아마도 그것이 당신이

div.listbox {  
    overflow-x: hidden; 
} 

Answer 3

div.listbox{ 
... 
vertical-align: bottom; 
}