Как сделать что бы блок не принимал ширину родителя?

Frontend developer HTML / CSS
1

У меня есть два блока, и один например не большой по содержанию (текст), но принимает ширину родителя, а второй большой по контенту и по ширине такой же, так вот, как можно что бы если блок короткий, то он не принимал всю ширину родителя, а был по контенту, и начинался с начала блока в который вложен.

2

Тут всё дело в align-items:flex-start



.messages {

    display:flex;

    flex-direction:column;

    position: relative;

    align-items: flex-start;

}

.messages div {

    color:#221;

    display:flex;

    font-size:15px;

    justify-content:flex-start;

    line-height:22px;

    padding:6px 12px;

    background:#999999;

    margin-bottom:4px;

}
 
 

<div class="messages">

    



        Я короче!

    




    



        А я подлиннее буду!