html - Horizontal scroll using nowrap and inline-block -

i'm developing horizontal scrolling gallery using white-space: nowrap , display: inline-block. gallery composed of series of image panes , text pane @ end inside container. can @ example here:

https://jsfiddle.net/zcf0va58/3/

.container {    display: inline-block;    white-space: nowrap;    border: 1px solid red;  }  .post-image {    display: inline-block;    vertical-align: top;  }  .post-text {    display: inline-block;    vertical-align: top;    max-width: 100px;    width: 100%;    white-space: normal;  }

<div class="container">    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-text">      <div>        text text text text text text text      </div>    </div>  </div>

as can see text pane has max-width, not fixed width. causes container shrink bit. if specify fixed width in text pane container wraps around child panes correctly:

https://jsfiddle.net/zcf0va58/4/

.container {    display: inline-block;    white-space: nowrap;    border: 1px solid red;  }  .post-image {    display: inline-block;    vertical-align: top;  }  .post-text {    display: inline-block;    vertical-align: top;    width: 100px;    white-space: normal;  }

<div class="container">    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-image">      <img src="http://uc48.net/europeana/images/fpo_square.png" width="100" height="100" />    </div>    <div class="post-text">      <div>        text text text text text text text      </div>    </div>  </div>

is expected behaviour? there way container wrap around child panes correctly without having specify fixed width in text pane?

it looks problem due white-space , max-width values being used together. can try using flexbox instead, since doesn't need use white-space: nowrap; such layout.

jsfiddle

.container {    display: inline-flex;    border: 1px solid red;  }  .post-image {    flex-shrink: 0;  }  .post-text {    max-width: 100px;  }

<div class="container">    <div class="post-image">      <img src="//dummyimage.com/100/ccc">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/999">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/ccc">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/999">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/ccc">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/999">    </div>    <div class="post-text">      <div>        text text text text text text text      </div>    </div>  </div>

you can try css table layout if needs run on legacy browsers.

jsfiddle

.container {    display: inline-table;    border: 1px solid red;  }  .post-image, .post-text {    display: table-cell;    vertical-align: top;  }  .post-text {    max-width: 100px;  }

<div class="container">    <div class="post-image">      <img src="//dummyimage.com/100/ccc">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/999">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/ccc">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/999">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/ccc">    </div>    <div class="post-image">      <img src="//dummyimage.com/100/999">    </div>    <div class="post-text">      <div>        text text text text text text text      </div>    </div>  </div>