title: How to I keep the text in this Slick.js element from going past it's container?
body: <p>I'm using <a href="https://github.com/kenwheeler/slick" rel="nofollow noreferrer">slick.js</a> to make slider. In order to keep my text div lined up with my media div, I've added the option :<code>variableWidth:true,</code> to the text div.
  With this option, the media div and, text div grow and shrink with each other responsively. However, with the variable width option set to true - the text within starts to go outside of its container.</p>
  
  <p><a href="https://jsfiddle.net/5sck1b6u/" rel="nofollow noreferrer">jsfidlle with incorrect behavior</a></p>
  
  <p><a href="https://jsfiddle.net/5sck1b6u/" rel="nofollow noreferrer">jsfiddle with correctish behavoir</a></p>
  
  <p>Correct look with <code>variablewidth</code> not set:<a href="https://i.stack.imgur.com/BFAxt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BFAxt.jpg" alt="enter image description here"></a>
  I want the slider to look like it does above <em>but also, the text does not wrap neatly.</em></p>
  
  <p>Incorrect with <code>variablewidth</code> set to true:<a href="https://i.stack.imgur.com/yp0wQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yp0wQ.jpg" alt="enter image description here"></a>
  <em>Above: Text just runs off the page and, the next text slides do the same but they stretch further off the page  - making the blue box (containing div) look empty.</em></p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
              $('.text-slides').slick({
                variableWidth:true,
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  arrows: false,
                  fade: true,
                  centerMode: true,
                  asNavFor: '.slider-nav',
  
              });
              $('.slider-nav').slick({
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  asNavFor: '.text-slides',
                  dots: true,
                  centerMode: true,
                  focusOnSelect: true,
                  autoplay: true,
                  mobileFirst:true
              });
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider-container {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }
  
  .slider-media {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 60%;
  }
  
  .slider-text {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #2c3e50;
      width: 40%;
  }
  
  .slider-media &gt; .slick-slider {
      margin-bottom: 0;
  }
  
  .carousel-images &gt; .slick-list {
      padding: 0 !important;
  }
  
  .carousel-images &gt; .slick-list &gt; .slick-slide {
      width: 350px !important;
  }
  
  .carousel-images &gt; .slick-prev {
      left: 10px;
  }
  
  .carousel-images &gt; .slick-next {
      right: 10px;
  }
  
  .carousel-images &gt; .slick-dots {
      bottom: -10px;
  }
  
  .carousel-images &gt; .slick-dots &gt; li button:before {
      font-size: 12px;
  }
  
  .carousel-text {
      font-family: 'Roboto', sans-serif;
      font-weight: 100;
      padding: 20px;
      word-break: break-all;
  
  }
  
  .carousel-text .title {
      color: #bdc3c7;
      font-size: 1.05em;
      font-weight: 300;
      text-transform: uppercase;
  }
  
  .carousel-text .headline {
      color: #fff;
      text-align: justify;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slider-container"&gt;
                              &lt;div class="slider-media"&gt;
                                  &lt;div class="carousel-images slider-nav"&gt;
                                      &lt;div&gt;
                                          &lt;img src="img/animals" alt="1"&gt;
                                      &lt;/div&gt;
                                      &lt;div&gt;
                                          &lt;img src="img/cats" alt="2"&gt;
                                      &lt;/div&gt;
                                      &lt;div&gt;
                                          &lt;img src="img/nature" alt="3"&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!-- /.block-media --&gt;
  
                              &lt;div id="text-slider" class="slider-text"&gt;
                                  &lt;div class="carousel-text text-slides"&gt;
                                      &lt;div&gt;&lt;span class="title"&gt;Sed ut perspiciatis unde omnis iste natus error&lt;/span&gt;
  
                                          &lt;p class="headline"&gt;
                                              Sit voluptatem accusantium doloremque laudantium,
                                              totam rem aperiam, eaque ipsa quae ab illo inventore
                                              veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                          &lt;/p&gt;
                                      &lt;/div&gt;
  
                                      &lt;div&gt;&lt;span class="title"&gt; Nemo enim ipsam &lt;/span&gt;
  
                                          &lt;p class="headline"&gt;
                                              Quia voluptas sit aspernatur aut odit aut fugit,
                                              sed quia consequuntur magni dolores eos qui
                                              ratione voluptatem sequi nesciunt.
                                          &lt;/p&gt;
                                      &lt;/div&gt;
  
                                      &lt;div&gt;&lt;span class="title"&gt;Non provident, similique sunt in culpa&lt;/span&gt;
  
                                          &lt;p class="headline"&gt;
                                              Officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                                              rerum facilis
                                              est et expedita distinctio.
                                          &lt;/p&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone help me find a way to keep the text from overflowing <strong>and</strong> get it to wrap between words instead of in the middle of word?</p>