Как создать рамку вокруг элементов в flex box

Question

Граница, которую я рисую, теперь заполняет всю ширину экрана.Я бы хотел, чтобы он уменьшился до размера дочерних элементов.

Я попытался добавить свойство границы в flexbox, но, как я уже сказал, оно заполняет весь экран.

 <div class="mainThing">
     <div class="thing_row">
         <div class="thing_img">
             <img src="url" height="60">
         </div>
         <div class="thing_texts">
             <div class="noa_txt">NOW ON AIR</div>
             <div class="main_txt">The Royal Sunrise</div>
             <div class="peeps_txt">Meth, Pavan, Thinula and Jayavi</div>
         </div>
     </div>
 </div>

.thing_row{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    border: solid black;
    flex-basis: content;
}

Я ожидал, что будет нарисована граница, плотно прилегающая к дочерним элементам, но она заполняет всю ширину экрана.

Answer 1

При display:flex элемент по умолчанию имеет собственную ширину 100%,

Используйте display:inline-flex на .thing-row .... и он свернется до размера его дочерних элементов.

.thing_row {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  border: 1px solid black;
  flex-basis: content;
}

<div class="mainThing">
  <div class="thing_row">
    <div class="thing_img">
      <img src="http://www.fillmurray.com/60/60" height="60">
    </div>

    <div class="thing_texts">
      <div class="noa_txt">NOW ON AIR</div>
      <div class="main_txt">The Royal Sunrise</div>
      <div class="peeps_txt">Meth, Pavan, Thinula and Jayavi</div>
    </div>
  </div>
</div>

Answer 2

Вам не хватает border-width.

Попробуйте это или посмотрите здесь: https://www.w3schools.com/css/css_border.asp

border-style: solid;
border-width: 5px;