SOURCE

var containerWrapper = document.getElementById('container-wrapper')
var container = document.getElementById('container')
var openButton = document.getElementById('open')
var closeButton = document.getElementById('close')
generateData()
initButton()

function initButton () {
  if(container.offsetHeight > containerWrapper.offsetHeight){
    openButton.style.visibility='visible'
  }else{
    openButton.style.visibility='hidden'
  }
  closeButton.style.visibility='hidden'
}
function onOpen () {
  console.log('open')
  containerWrapper.style.maxHeight ='999px'//这里要设置一个足够大的值比如9999px
  openButton.style.visibility='hidden'
  closeButton.style.visibility='visible'
}
function onClose () {
  containerWrapper.style.maxHeight ='96px'
  openButton.style.visibility='visible'
  closeButton.style.visibility='hidden'
}
function generateData () {

  var fragment = document.createDocumentFragment()
  for (var i = 0; i < 33; i += 1) {
    var div = document.createElement('div')
    div.innerText = Math.random()
    div.classList.add('box')
    fragment.appendChild(div)
  }
  container.appendChild(fragment)
}

<main id="container-wrapper" class="container-wrapper">
    <div id="container" class="container">
    </div>
</main>
<footer style="text-align: center" >
    <button id="open" onclick="onOpen()" >展开</button>
    <button id="close" onclick="onClose()">收起</button>
</footer>

.container-wrapper {
        max-height: 96px;
        transition: max-height .25s;
        overflow: hidden;
    }
    .container{
        display: flex;
        flex-wrap: wrap;
    }
    .box {
        padding: 5px;
        border: 1px solid #ddd;
        margin: 5px;
        border-radius: 5px;
        height: 26px;
    }