CODEWITHSUNDEEP
htmlcssflexbox
r3plica
r3plica

Reputation: 13367

flexbox and container widths

so I have a strange issue, I have this html:

<div class="container">
  <div class="row">
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </div>
</div>

and then I have this CSS

html,
body {
    padding: 0;
    margin: 0;
}

.container {  
    height: 100vh;
    display: flex;
}

.row {
    display: flex;
    padding: 50px 20px 20px;
}

.flex-column {
    background-color: pink;

    width: auto;
    margin-right: 100px;
    width: 280px;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px 0 0 20px;
}

.box {
    background-color: blue;
    width: 120px;
    height: 120px;
    margin: 0 20px 20px 0;
}

If I use it like that, the content all tries to fit in the rows width, which is not what I want. I would like the row to expand (and present a scrollbar) depending on how much content is in it.

Now, by accident I noticed that if I add the flex-column class to the row, it fixes it (sort of). You can see with the background colours that it isn't doing everything correctly, but the side effect is that it actually works the way I want it to.

My question is how can I get it to wrap the row around the content but still have the scroll bar?

Here is the codepen to show what I currently have.

http://codepen.io/r3plica/pen/waPoQo

if you remove the flex-column class from the row, you will see the issue.

Upvotes: 0

Views: 68

Answers (1)

IMI
IMI

Reputation: 2469

Do you have to use flexbox? You can do it without it. I have posted a flex and a non-flex example. If you want to use flex, you have to make sure you that you have a block container element around your flex element with overflow:scroll. Also your main flex element inside your container needs to be set to float so that it will properly expand horizontally to include your inline-block child elements.

Non-Flex Example: 

html,
body {
  padding: 0;
  margin: 0;
}

.row {
    background-color: red !important;
    display: block;
    padding: 50px 20px 20px;
    overflow:scroll;
    white-space:nowrap;
}

.flex-column {
    background-color: pink;
    display: inline-block;
    margin-right: 100px;
    padding: 20px 0 0 20px;
    width: 280px;
    vertical-align:top;
}

.box {
    background-color: blue;
    display: block;
    float: left;
    height: 120px;
    margin: 0 20px 20px 0;
    width: 120px;
}
<div class="container">
  <div class="row">
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </div>
</div>

Flex Example:

html,
body {
  padding: 0;
  margin: 0;
}

.container{
  display:block;
  overflow:auto;
}

.row {
    background-color: red !important;
    display: flex;
    padding: 50px 20px 20px;
    overflow:scroll;
    white-space:nowrap;
    float:left;
}

.flex-column {
    background-color: pink;
    display: inline-block;
    margin-right: 100px;
    padding: 20px 0 0 20px;
    width: 280px;
    vertical-align:top;
}

.box {
    background-color: blue;
    display: block;
    float: left;
    height: 120px;
    margin: 0 20px 20px 0;
    width: 120px;
}
<div class="container">
  <div class="row">
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions