Q:

when flex-direction is column, divs takes all available width. how to prevent this?

See attached snippet.
I need each item to take width space, with respect to content.
flex-items need to be stacked vertically, like in the example.
how to achieve it?
how to do that?

.container {
  display:flex;
  flex-direction:column;
}
.green {
  background-color:green;
}
.red {
  background-color:red;
}
<div class="container">
  <div class="green"> hello world</div>
  <div class="red"> hello world2</div>
</div>

A:

Assuming they still should stack vertically, use display: inline-flex and they will size equally by the content of the widest item.
For each row to collapse to their individual content, use i.e. align-items: flex-start, and note, this will make them collapse when using display: flex too.
Why they stretch to equal width, is because align-items defaults to stretch, so by using any other value they will size by content 

.container {
  display: inline-flex;
  flex-direction:column;
  align-items: flex-start;
}
.green {
  background-color:green;
}
.red {
  background-color:red;
}
<div class="container">
  <div class="green"> hello world</div>
  <div class="red"> hello world2</div>
</div>

