Improper Flex-Wrap utilization?

Question

Now I am just learning about flex and still quite novice, so please if I'm asking the wrong questions, just inform me. I want to have the subscriber items wrap to another column. I had assumed based on my understand that flex-wrap is what I'm looking for here, but it doesn't seem to have the result I want.

My question is simply;

• Is this a proper utilization?
• If yes, what might I be doing wrong here that's not giving me the result I'm aiming for?
• If no, what would you recommend I look into using?

Below is a snippet of the section, the div in question is labeled subscriber-panel and bare in mind that heights aren't necessarily accurate in the snippet, but all the same I'm just looking to be pointed in the right direction!

Thanks in advance, please comment if additional information is needed.

/* Content Section */

#content {
  height: 50vh;
}

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
}

#content-container>div {
  flex: 1;
  text-align: center;
}

.panel {
  background: rgba(0, 0, 0, .6);
}

#subscriber-panel {}

.subscriber {
  display: flex;
  flex-wrap: wrap;
}

.username {
  flex: 1;
  font-size: 120%;
}

.subage {
  flex: 1;
  font-size: 80%;
}

#clips-panel {}

#box3 {}

<section id="content">
  <div id="content-container" class="container">
    <div id="subscriber-panel" class="panel">
      <h1>Subscribers</h1>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>



    </div>
    <div id="clips-panel" class="panel">
      <h1>Trending Clips</h1>
    </div>
    <div id="box3" class="panel">
      <h1>Box 3</h1>
    </div>
  </div>
</section>

As I continue searching through, it seems not having a max-width was definitely an issue, but since setting it to 200px it just appears there is a large margin at the end of the subscriber div that's not allowing the container enough room to wrap the items.

I've tried resetting and manually creating 0 margins for all elements related, but doesn't seem to be having any effect. I'll keep digging here.

Answer 1

From W3School The flex-wrap property specifies whether the flexible items should wrap or not. items means the children of a flexed container.

All you have to do is :

#subscriber-panel{
  display:flex;
  flex-wrap:wrap;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Content Section */

#content {
  height: 50vh;
}

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
}

#content-container>div {
  flex: 1;
  text-align: center;
}

.panel {
  background: rgba(0, 0, 0, .6);
}



.subscriber {
  display: flex;
}

.username {
  flex: 1;
  font-size: 120%;
}

.subage {
  flex: 1;
  font-size: 80%;
}

/* Added */

#subscriber-panel{
  display:flex;
  flex-wrap:wrap;
}
h1{
  width:100%;
}

<section id="content">
  <div id="content-container" class="container">
    <div id="subscriber-panel" class="panel">
      <h1>Subscribers</h1>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png" style="height:70px;width:70px;"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>



    </div>
    <div id="clips-panel" class="panel">
      <h1>Trending Clips</h1>
    </div>
    <div id="box3" class="panel">
      <h1>Box 3</h1>
    </div>
  </div>
</section>

Answer 2

Its not exactly how I was intending to align, so if anyone has any insight as to how I can achieve what was set out in the original drawing, that'd be awesome, but as of now its functional and works for me, so for the sake of the placeholder this is fine.

What I did was simply wrap the flex contents in a new container.

#content {
  height: 50vh;
}

#content-container {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
}

#content-container>div {
  flex: 1;
  text-align: center;
}

.panel {
  background: rgba(0, 0, 0, .6);
}

#subscriber-panel {
  height: 100%;
  width: auto;
  margin: 0;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  height: 400px;
  justify-content: left;
}

.subscriber {
  display: inline-block;
  flex: 1;
}

.sub-avatar {
  margin: 0;
}

.username {
  flex: 1;
  font-size: 120%;
  margin: 0;
}

.subage {
  flex: 1;
  font-size: 80%;
  margin: 0;
}

<div id="content-container" class="container">
  <div id="subscriber-panel" class="panel">
    <h1>Subscribers</h1>
    <div class="flex-container">
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>

      <div class="subscriber">
        <div class="sub-avatar">
          <img src="img/foxbox-70x70.png"></img>
        </div>
        <div class="sub-info">
          <h2 class="username">FoxBoxUnion</h2>
          <h3 class="subage"> 6 months SubSpent</h3>
        </div>
      </div>
    </div>
  </div>

There may be some redundancies in the snippet, but it should be fairly clear what I've done.