सेट चौड़ाई

Question

मैं इस भीतरी सामग्री div की चौड़ाई स्क्रॉल क्षेत्र की चौड़ाई के बराबर होना मिलता है?

<div class="scrollable"> 
    <div class="content">short</div> 
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div> 
</div> 

सीएसएस के साथ

:

.scrollable { 
    width: 300px; 
    height: 300px; 
    overflow: auto; 
} 

.content { 
    background-color: lightblue; 
    white-space: nowrap; 
} 

jsFiddle: http://jsfiddle.net/XBVsR/12/

समस्या: अगर आप स्क्रॉल भर में आप देख सकते हैं कि पृष्ठभूमि के रूप में यह होना चाहिए भर में सभी रास्ते जाने नहीं देता है।

मैं चौड़ाई की स्थापना की कोशिश की है: कोई लाभ नहीं हुआ दिखाई दे रहा, आदि,: 100%, अतिप्रवाह।

संपादित करें: मैंने यह स्पष्ट करने के लिए अद्यतन किया है कि मैं पाठ को लपेटना नहीं चाहता - मैं पूरी चीज़ पर क्षैतिज स्क्रॉल चाहता हूं। http://jsfiddle.net/XBVsR/11/

याद है कि इस वर्ग के .Content साथ सभी तत्वों को प्रभावित करती है:

Answer 1

को यह दे। jsfiddle

Answer 2

जोड़ें वर्ग

overflow: auto; 

बेला अपडेट किया गया यहाँ .Content करने के लिए। आप इसे एक और वर्ग का नाम भी दे सकते हैं।

Answer 3

सिर्फ आप नेस्टेड divs के लिए display: table-row; उपयोग कर सकते हैं अपनी सामग्री

overflow: auto; 

Answer 4

आप चौड़ाई 300px होने के लिए बाहरी div सेट करने के लिए जा रहे हैं नहीं कर सकते को देखो। यह बाध्यकारी बॉक्स तोड़ने वाला अखंड पाठ है। हालांकि, आप सामग्री सीएसएस को यह जोड़कर शब्द लपेट कर सकते हैं: स्क्रॉल करने योग्य वर्ग से सामग्री एक के लिए ऑटो:

word-wrap: break-word; 

हालांकि, अगर है कि 300px आप के लिए कोई फर्क नहीं पड़ता, आप अतिप्रवाह स्थानांतरित कर सकते हैं , और, भी, पृष्ठभूमि मुद्दे को ठीक करना चाहिए।