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

Question

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>

change it to `flex-direction: row;` – Chiller Jun 27 '17 at 14:44 — Chiller, Jun 27 '17 at 14:44
Add display:inline-table to child elements. – Mohamed Mohaideen AH Jun 27 '17 at 14:58 — Mohamed Mohaideen AH, Jun 27 '17 at 14:58

Asons · Accepted Answer · 2017-06-27T15:27:56.233

4

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>

edited Jun 27 '17 at 15:27

answered Jun 27 '17 at 14:47

Asons

84,923
12
110
165

it's better but still not exactly what i need. it seems it takes the longest flex-item in the column, and make everybody that length. – LiranC Jun 27 '17 at 14:51
@LiranC Updated – Asons Jun 27 '17 at 14:56
1

@LGSon nice trick – dippas Jun 27 '17 at 14:58
wow , interesting how `align-items: flex-start` had anything to do with it with this magic. – LiranC Jun 27 '17 at 15:00
1

@LiranC Added an explanation why that fixes it – Asons Jun 27 '17 at 15:03

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

1 Answers1