Html 如何在flex box中的元素周围创建边框

我正在绘制的边框现在填充整个屏幕宽度。我希望它缩小到子元素的大小

我曾尝试向flexbox添加一个border属性，但正如我所说的，它填充了整个屏幕

 <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>

---

我希望绘制边框，使其与子元素紧密贴合，但它会填满整个屏幕宽度。

使用

display:flex

元素默认为其本机宽度100%

在

.thing行上使用
display:inline flex
…它将折叠为其子级的大小


.thing\u行{
显示：内联flex；
弯曲方向：行；
调整项目：灵活启动；
调整内容：灵活启动；
边框：1px纯黑；
弹性基础：内容；
}

现在播出
皇家日出酒店
Meth，Pavan，Thinula和Jayavi

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