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

Question

The border I'm drawing now fills the whole width of the screen. I would like it to shrink to the size of the child elements.

I have tried adding a border property to the flexbox, but as I said, it fills the whole screen.

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

I expected the border to be drawn, tightly fitting the child elements but it fills up the whole width of the screen.

Answer 1

With display:flex the element defaults to its native width of 100%,

Use display:inline-flex on the .thing-row ....and it will collapse to the size of it's children.

 .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

You're missing the border-width .

Try this one or have a look on here: https://www.w3schools.com/css/css_border.asp

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