Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><code>width: auto;</code> does not mean that your <code>div</code> will automatically resize based on the content. It means that it automatically takes the width of its parent element. <code>width: auto;</code> is also the default width of a <code>div</code>.</p> <p>Below is a simplified working sample. Notice the <code>overflow-x: hidden;</code> and <code>padding: 0 16px 0 0;</code> on the check box list. This makes sure that there will be no horizontal scrollbar and that no content will be hidden at the right edge.</p> <pre><code>&lt;!doctype html&gt; &lt;html&gt;&lt;head&gt; &lt;title&gt;Check box list with vertical scrollbar&lt;/title&gt; &lt;style type="text/css"&gt; .checkBoxList { border: 1px solid #BBBBBB; height: 130px; float: left; line-height: 24px; padding: 0 16px 0 0; overflow: auto; overflow-x: hidden; } .checkBoxList label { display: block; white-space: nowrap; letter-spacing: 5px; } &lt;/style&gt; &lt;/head&gt;&lt;body&gt; &lt;div class="checkBoxList"&gt; &lt;label for="cb1"&gt;&lt;input id="cb1" type="checkbox"/&gt;Check box 1&lt;/label&gt; &lt;label for="cb2"&gt;&lt;input id="cb2" type="checkbox"/&gt;Check box 2&lt;/label&gt; &lt;label for="cb3"&gt;&lt;input id="cb3" type="checkbox"/&gt;Check box 3&lt;/label&gt; &lt;label for="cb4"&gt;&lt;input id="cb4" type="checkbox"/&gt;Check box 4&lt;/label&gt; &lt;label for="cb5"&gt;&lt;input id="cb5" type="checkbox"/&gt;Check box 5&lt;/label&gt; &lt;label for="cb6"&gt;&lt;input id="cb6" type="checkbox"/&gt;Check box 6&lt;/label&gt; &lt;label for="cb7"&gt;&lt;input id="cb7" type="checkbox"/&gt;Check box 7&lt;/label&gt; &lt;label for="cb8"&gt;&lt;input id="cb8" type="checkbox"/&gt;Check box 8&lt;/label&gt; &lt;label for="cb9"&gt;&lt;input id="cb9" type="checkbox"/&gt;Check box 9&lt;/label&gt; &lt;/div&gt; &lt;/body&gt;&lt;/html&gt; </code></pre> <p>You can find more information about the CSS overflow property here: <a href="http://css-tricks.com/2833-the-css-overflow-property/" rel="nofollow">http://css-tricks.com/2833-the-css-overflow-property/</a>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload