Question 46158 in CSS Question posted in
Some basic documentation can be found here.

Flexbox with flow: column wrap and height: min-content not wrapping – CSS

I have a tiny CSS problem. I have divs with different heights and would like the parent element to have the height of the biggest element and the rest of the elements to wrap accordingly. This works perfectly for rows (the parent element having the width of the widest element) with the code below, but for columns it doesn’t work (just change the body class to column). Any idea how I could do this?

body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: flex;
  flex-flow: wrap column;
  height: min-content;
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}
<html>

<body class="row">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    Use display: inline-flex; on #parent.

    body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: inline-flex;
  flex-flow: wrap column;
  height: min-content;
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}
    <body class="column">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

    height: min-content; is applied on all children collectively. If you want the children to wrap, you have to specify a max-height: (somValue)px on the #parent

    body.row #parent {
  display: flex;
  flex-flow: wrap row;
  width: min-content;
}

body.row .child {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  width: max-content;
}

body.column #parent {
  display: flex;
  flex-flow: wrap column;
  max-height: 100px;
  width: 200px
}

body.column .child {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: max-content;
  width: max-content;
}
    <html>

<body class="column">
  <div id='parent'>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
      <span>3. Line</span>
      <span>4. Line</span>
      <span>5. Line</span>
      <span>6. Line</span>
      <span>7. Line</span>
      <span>8. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
    <div class="child">
      <span>1. Line</span>
      <span>2. Line</span>
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search