How to create a border around elements in flex box

user_10811409 0
Viewed 22211

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.

web css html
1 Answers

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>

user_28020400
Related