title: How to prevent the images overflowing the div block by moving to a new line?
body: <p>I am working on my code to set up the list of emoticons using the buttons. I have got a problem with the emoticons images because they are overflowing the div block when I am controlling on the width size of the div block to prevent the images overflowing so it didn't work.</p>
  
  <p>Here is the image: </p>
  
  <p><a href="https://i.stack.imgur.com/tJ1jJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tJ1jJ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://jsfiddle.net/ozd37gbm/" rel="nofollow noreferrer">Here</a> is the JSFiddle link.</p>
  
  <p>I have already tried this:</p>
  
  <pre><code>overflow:hidden;
  </code></pre>
  
  <p>And I have also tried this:</p>
  
  <pre><code>width: 100%;
  height: 100%; 
  overflow-y: scroll;
  </code></pre>
  
  <p>Here is the full code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.font-border {
    -webkit-align-items: center;
    align-items: center;
    background-color: #ffff;
    border: none;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    /*display: -webkit-inline-box;
          display: -webkit-inline-flex;
          display: -ms-inline-flexbox;*/
    display: none;
    margin-left: 16px;
    margin-bottom: 12px;
    position: relative;
    padding: 8px 2px;
    white-space: nowrap;
    height: 21px;
  }
  
  .search_emoticons {
    background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -799px;
    width: 28px;
    height: 30px;
    margin: 2px 3px;
    border: 0;
    background-color: rgba(0, 0, 0, .3);
    opacity: 1;
  }
  
  .show_face_emoticons {
    background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -270px;
    width: 28px;
    height: 30px;
    margin: 2px 3px;
    border: 0;
    opacity: .225;
  }
  
  .show_object_emoticons {
    background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -689px;
    width: 28px;
    height: 30px;
    margin: 2px 3px;
    border: 0;
    opacity: .225;
  }
  
  .show_nature_emoticons {
    background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -547px;
    width: 28px;
    height: 30px;
    margin: 2px 3px;
    border: 0;
    opacity: .225;
  }
  
  .show_transportation {
    background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -657px;
    width: 28px;
    height: 30px;
    margin: 2px 3px;
    border: 0;
    opacity: .225;
  }
  
  .show_symbol_emoticons {
    background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -854px;
    width: 28px;
    height: 30px;
    margin: 2px 3px;
    border: 0;
    opacity: .225;
  }
  
  .close_border {
    border: none;
    background: no-repeat url(https://ssl.gstatic.com/mail/sprites/compose-28e1860af47052bc9ce7a152b803c105.png) 0 -767px;
    height: 30px;
    width: 30px;
    float: right;
  }
  
  .emoticons_input_search {
    border-style: none none solid;
    border-bottom: 2px solid #c3c3c3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: .875rem;
    width: 100%;
    padding: 8px;
    outline: none;
  }
  
  .a8I {
    position: relative;
    overflow-y: scroll;
    display: inline-block;
    display: table-cell;
    width: 100%;
    height: 84%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
  
  .a8m {
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    margin: 4px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: 1px;
  }
  
  .e1f600 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -11223px;
  }
  
  .e1f601 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f602 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f603 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f604 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f605 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f606 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f607 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f608 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f609 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .e1f610 {
    background: no-repeat url(https://ssl.gstatic.com/chat/emoji/png28-7f9d3a5045813584f828fe69a1fecb77.png) 0 -14152px;
  }
  
  .a8r {
    margin: 0 .2ex;
    vertical-align: middle;
    height: 28px;
    width: 28px;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="emoticons-menu" class="font-border" style="visibility: visible; left: 212px; top: 219px; box-sizing: border-box; position: absolute; width: 262px; height: 212px; z-index: 2; display: block;"&gt;
  
  
    &lt;div id="show_emoticons" class="a8I a8m" style="position: relative; width: 100%; height: 100%; overflow-y: scroll;"&gt;
  
      &lt;button aria-label="grinning face" string="1f601" class="e1f601 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f602" class="e1f602 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f603" class="e1f603 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f604" class="e1f604 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f605" class="e1f605 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f606" class="e1f606 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f607" class="e1f607 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f608" class="e1f608 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f609" class="e1f609 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f610" class="e1f610 a8r"&gt;&lt;/button&gt;
  
      &lt;button aria-label="grinning face" string="1f600" class="e1f600 a8r"&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I'm expecting to achieve is I want to move the images where it goes over the div block in each time so the images would display in the new line to prevent the overflowing. I have got no idea how to do this as I have tried few different ways so could you please show me an example how I could move the images to a new line to prevent the overflowing of the div block?</p>
  
  <p>Thank you.</p>