3

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>

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

1 Answer 1

0

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

1
  • 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" Nov 23, 2017 at 11:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.