How to set container width to child in flex box with flex-direction as column and flex-wrap as wrap

Question

Here is the working code:

.container{
  display: flex;
  background-color: lightgreen;
  justify-content: center;
  alighn-item: center;
}

.child{
  margin-left: 10px;
  height: 200px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.childItem{
  height: 50px;
  width: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 10px;
}

<div class='container'>
  <div>Test</div>
  <div class='child'>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
    <div class="childItem">Amounts</div>
  </div>
</div>

Current output

Expected output

We want this child container (yellow) width should equal to the child item (red) elements

Can you provide the image that you want as the output, that would be more explanatory. — Mehraj Khan, Oct 24 '18 at 07:19
specify a width on the container, put flex on the child flex:0 0 60%; — Carol McKay, Oct 24 '18 at 07:27
@Piyush Dhamecha First you have to give `width` or `flex-basis` to the `.child`. In your code to give `width: 100px` to the childItem thats the reason container taking width 100px based on width auto and the next items overflow. Add this to the `.child` `flex: 0 0 12%; ` — Mehraj Khan, Oct 24 '18 at 07:38
@MerajKhan why should we need to specify `width`, what will heppen if there is multiple child item which excides the width. — Piyush Dhamecha, Oct 24 '18 at 07:41
@CarolMcKay can we do without specifying width, width should be auto to child item — Piyush Dhamecha, Oct 24 '18 at 07:43
@Piyush Dhamecha If you want to do like this then give `flex: 0 0 100%` — Mehraj Khan, Oct 24 '18 at 07:45
@MerajKhan `flex: 0 0 100%` takes full width, it should be the width of the child item element, did you test it in codepen, is that giving expected result? — Piyush Dhamecha, Oct 24 '18 at 07:49
@PiyushDhamecha i tried like this https://codepen.io/Merajkhan/pen/YJJRzo — Mehraj Khan, Oct 24 '18 at 07:54
@MerajKhan what if there is one or two child item, its taking 50% of the width, it should not be, we don't want to be a fixed width — Piyush Dhamecha, Oct 24 '18 at 08:00

score 0 · Answer 1 · answered Oct 24 '18 at 08:14

.test-container{
  background-color: lightgreen;
  padding: 20px 0px;
}
.container{
  background-color: lightgreen;
  width:300px;
  margin:auto;
}

.child{
  margin-left: 10px;
  height: 200px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.childItem{
  height: 50px;
  width: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0 10px;
}

<div class="test-container">
  <div class='container'>
    <div>Test</div>
    <div class='child'>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
      <div class="childItem">Amounts</div>
    </div>
  </div>
</div>

You can adjust container width. If you keep width auto then it will place elements to cover available width. — DeepaliK, Oct 25 '18 at 06:08

How to set container width to child in flex box with flex-direction as column and flex-wrap as wrap

1 Answers1