जब एलिमेंट का कंटेंट आवंटित स्पेस से बड़ा हो तो क्या करें?

जब किसी एलिमेंट का कंटेंट उसके लिए आवंटित स्पेस से बड़ा होता है, तो CSS overflow प्रॉपर्टी का उपयोग करके इस समस्या को हल किया जा सकता है।

उदाहरण

निम्न कोड को चलाकर देखें कि overflow प्रॉपर्टी कैसे काम करती है:

<html>
  <head>
    <style>
      .scroll {
        display: block;
        border: 2px solid green;
        padding: 10px;
        margin-top: 10px;
        width: 300px;
        height: 50px;
        overflow: scroll;
      }
      .auto {
        display: block;
        border: 2px solid green;
        padding: 10px;
        margin-top: 10px;
        width: 300px;
        height: 50px;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <p>scroll वैल्यू का उदाहरण:</p>
    <div class="scroll">
      यह डेमो कंटेंट है। यह डेमो कंटेंट है। यह डेमो कंटेंट है।
      यह डेमो कंटेंट है। यह डेमो कंटेंट है। यह डेमो कंटेंट है।
      यह डेमो कंटेंट है। यह डेमो कंटेंट है। यह डेमो कंटेंट है।
      यह डेमो कंटेंट है। यह डेमो कंटेंट है। यह डेमो कंटेंट है।
    </div>
    <br />
  </body>
</html>

व्याख्या: overflow: scroll हमेशा स्क्रॉलबार दिखाता है, जबकि overflow: auto केवल तभी स्क्रॉलबार दिखाता है जब कंटेंट ओवरफ्लो होता है।