Question 227821 in Html Question posted in
Some basic documentation can be found here.

Html – When flexwrap is set to wrap, I want to automatically set the width of the wrap

When flexwrap is set to wrap, I want to automatically set the width of the wrap!

enter image description here
By setting the flexwrap to wrap, the item is automatically pushed out, but the width of the wrapping wrap is not automatically adjusted…

enter image description here
What I want is to automatically grow like above.

help me !!
https://codepen.io/laonjay/pen/YzRoZvZ

.flex-box {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 270px;
}
Tags:

2

Answers


  1. 0

    You can use the min-width property on your flex items. This will prevent the items from becoming too narrow when wrapping and will allow them to grow to a minimum width when needed.

    .flex-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 270px;
}

.flex-item {
  min-width: 200px; /* Adjust this value as needed */
  margin: 5px;
  padding: 10px;
  background-color: #f2f2f2;
}
    Login or Signup to reply.
  2. 0

    This actually is a problem in CSS and Flexbox that can only be fixed with hacks, other approaches, or via JavaScript. See this answer for a very good write-up.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search