1

I have a set of circular divs that looks like buttons, and they are wrapped by flexbox. What I'm trying to do is that when the device have not much height, the divs reorder INTO the page... but what happens is that they reorder OFF the page (and the '.generalsidebar' background property shows the error)

To summarize, when the device that not much height, the divs have to reorder inside the page and the background color #55acee HAVE to wrap them.

This is the HTML and CSS

.generalsidebar {
  background: #55acee;
  height: 100vh;
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}
.generalQuestionNumber {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 15px;
  text-align: center;
  margin: 12px;
  font-size: 20px;
}
<div class="generalsidebar">
  <div class="generalQuestionNumber">1</div>
  <div class="generalQuestionNumber">2</div>
  <div class="generalQuestionNumber">3</div>
  <div class="generalQuestionNumber">4</div>
  <div class="generalQuestionNumber">5</div>
  <div class="generalQuestionNumber">6</div>
  <div class="generalQuestionNumber">7</div>
  <div class="generalQuestionNumber">8</div>
  <div class="generalQuestionNumber">9</div>
  <div class="generalQuestionNumber">10</div>
  <div class="generalQuestionNumber">11</div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • Maybe you could make an example on jsfiddle so I could understand a little better. – Seanevd Mar 14 '16 at 18:20
  • Yes, it's a common problem. Column flex containers don't grow horizontally to wrap new columns. – Oriol Mar 14 '16 at 19:24
  • Can you explain what you want to achieve instead of bending `flex` to make it work? – Asons Mar 14 '16 at 19:26
  • Yes @Oriol, as you said, I want column flex grow horizontally to wrap new columns when neccesary... in this case when the devide height is too low to keep all the element in a single column –  Mar 14 '16 at 20:08

0 Answers0