<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .box {
    height: 42px;
    width: 800px;
    background: aliceblue;
    }
    .container-box .inside-box {
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #EEE;
    }
    .container-box .inside-box .icon-box {
    width: 24px;
    height: 24px;
    background: url('https://i.ibb.co/31yyBQv/download-icon.png') center no-repeat;
    }

<!-- language: lang-html -->

    <div class="box">
    <div class="container-box">
    <div class="inside-box">
    <div class="icon-box"></div>
    <a href="#">Fazer Download</a>
    </div>
    </div>
    </div>

<!-- end snippet -->

Eu gostaria de saber como eu faço para a DIV de ".container-box" fique no limite do texto de "Fazer Download", sem que ela herde a largura da DIV pai ".box". Se alguem tiver uma solução eu agradeço!