尝试将带有max-width的div缩小为子宽度，但它是最大宽度值

Question

我有三个垂直排列的div。第一个div具有最大宽度，但由于某种原因，div大于内容。它是为max-width设置的宽度。我希望以适合最大宽度的方式包装名称，然后将div缩小到儿童所要求的宽度。

内容是动态生成的，所以我不想为任何div设置宽度。我想要设置的唯一内容是所有名称的包装器的最大宽度。

它目前看起来像顶部图像中的示例 - 我希望它看起来像底部的示例：

以下是代码笔中的示例：http://codepen.io/anon/pen/dYPRLX

<div id="exhibition_title_wrapper">
<div id="exhibition_title_name">
<div class="artist_name">Steve Greenberg</div>,
<div class="artist_name">Sarah Thompson</div>,
<div class="artist_name">Bill Bradbury</div>,
<div class="artist_name">Tom Rogers</div>,
<div class="artist_name">Nicole Haight</div> 
<div class="artist_name">Barney Franklin</div>,
<div class="artist_name">Todd Franklin</div> 
</div>
<div id="slash"><img src="http://s9.postimg.org/r1gx8okp7/slash.png"></div>
<div id="exhibition_title_right">
<div id="exhibition_title_title">Expo 3000</div>
<div id="exhibition_title_date">September 1-20, 2017</div>
</div>
</div>

这是我的CSS

#exhibition_title_wrapper {display:block;}
#exhibition_title_name {display: table-cell;
vertical-align: middle; max-width:300px;}
.artist_name {display: inline-block;}
#slash {display: table-cell; vertical-align: middle; padding: 0 10px;}
#exhibition_title_right {display: table-cell; vertical-align: middle;}
#exhibition_title_title {display:}
#exhibition_title_date {display:}

任何人都可以指导我朝正确的方向发展吗？