How do you use html & css for conditional vertical wrap

Question

I am new to html & css. I am wondering if it is possible to do this. I have not found a way so far. I want to arrange my elements in a column with wrapping like

flex-direction: column;
flex-wrap: wrap;

However, I only want to wrap the elements if there is enough horizontal room to do so without a horizonal scrollbar. Otherwise, I want a vertical scroll bar and the items to be in a single column.

question from:https://stackoverflow.com/questions/66056970/how-do-you-use-html-css-for-conditional-vertical-wrap

Answer 1

I asked a very similar question here Flexbox using align-items: flex-start together with align-content: center. The main difference between our questions is that I was working with row orientation.

Essentially, there is no way to dynamically detect "is there enough room". You have to tell the browser when there is or is not enough room.

So, media queries are your way to go.

You'll also see that I put a max-height in the CSS below. Somewhere in your markup, at some level, there is going to need to be a height constraint or the columns will not wrap.

I've setup a sandbox for you https://jsfiddle.net/w2rdbpo0/

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 600px;
  overflow: scroll;
}
.flex-container > div {
  overflow-wrap: break-word;
}

@media (min-width: 600px) {
  /* 600 pixels totally random  */
  /* just assuming 600px meets "enough horizontal room" requirement */
  
  .flex-container {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .flex-container > div {
    max-width: 250px;
  }
}