2

I am trying to get the columns in flexbox to adjust their width as per the content inside them

.container {
  background: #99f;
  display: flex;
  flex-direction: row;
}

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 160px;
  margin: 5px;
}

.parent-1 {
  background: #fcc;
}

.parent-2 {
  background: #cfc;
}

.parent-3 {
  background: #ccf;
}

.child {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ccc;
  line-height: 3rem;
  text-align: center;
  margin: 3px;
}
<html>
<head>
</head>
<body>
  <div class="container">
    <div class="parent parent-1">
      <div class="child">1</div>
      <div class="child">1</div>
      <div class="child">1</div>
      <div class="child">1</div>
      <div class="child">1</div>
    </div>
    <div class="parent parent-2">
      <div class="child">2</div>
      <div class="child">2</div>
      <div class="child">2</div>
      <div class="child">2</div>
    </div>
    <div class="parent parent-3">
      <div class="child">3</div>
      <div class="child">3</div>
    </div>
  </div>
</body>
</html>

This is what I am trying to achieve:

  1. I am trying to get parent-1, parent-2 and parent-3 to stretch.
  2. They should take width as per their content.
  3. They should not cover the whole width of the container, unless their content pushes them to that width.

I have tried various versions of the CSS, but they are not giving me the desired results.

Thanks for looking at the problem!

Puneet
  • 71
  • 4
  • 2
    Please change className to class – Carol Skelly Nov 19 '19 at 18:36
  • Yes. Found my error. Just did it. Snippet is showing the same results now. Thanks! – Puneet Nov 19 '19 at 18:39
  • Have you checked out this as a possible solution? https://stackoverflow.com/questions/40018606/auto-width-of-flex-column – TexasB Nov 19 '19 at 18:47
  • Yes. I went through that post. The number of "parent" nodes in my case are variable. So, I was not able to apply different CSS to each. In my example above I have hardcoded it to 3 however. I have also tried display as table-row, table-cell, but no joy so far – Puneet Nov 19 '19 at 18:54

0 Answers0