html - 如何在弹性框中的元素周围创建边框

Question

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

我曾尝试向弹性框添加边框属性，但正如我所说，它会填满整个屏幕。

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