flexbox column stretch to fit content

Question

Goodday fellow developers,

I would like to create a container that allows content to go from top to bottom and left to right. The parent container needs to stretch to fit but within maximum defined values.

I have used flexbox for this purpose, however I do not get the parent container to stretch to fit. Does anyone have any suggestions, without having to hack my way with javascript to calculate the width?

.flex-container {
  display: inline-flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 300px;
  max-width: 1000px;
  background-color: #333;
}


.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
</div>

what do you expect? To have the grey background behind all the content? — mickaelw, Nov 23 '17 at 10:09
Yes, I would like the parent container to stretch over all the items, but not up till the maximum — HemlockDevelopment, Nov 23 '17 at 11:53

score 0 · Answer 1 · answered Nov 23 '17 at 10:18

Did you really need the outer inline container? I would suggest this approach:

.flex-container {
  display: flex;
  background-color: #ccc;
}

.flex-container-content{
  display: flex;    
  flex-flow: column wrap;
 
  max-height: 300px;
  max-width: 1000px;      
  background-color: #333;
}

.flex-container-content > div {
  background-color: #EB213C;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<!-- <div class="flex-container"> -->
  <div class="flex-container-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>  
    <div>4</div>
    <div>5</div>
    <div>6</div>  
    <div>7</div>
    <div>8</div>
    <div>9</div>  
    <div>10</div>
    <div>11</div>
    <div>12</div> 
  </div>
<!-- </div> -->

Perhaps not, but the problem I am experiencing with this fix, is that the parent container always become 1000px and doesn't scale to fit the content. Also the content gets spread over the parent instead of aligning to the "top left" — HemlockDevelopment, Nov 23 '17 at 11:03

flexbox column stretch to fit content

1 Answers1

Linked