How to set width based on content length using flex

Question

I'm trying to make width of each item based on the content but what I have so far set the width all the way to available spaces. flex: 0 0 auto does not seem to do the trick. What am I doing wrong?

Goal is have a width based on the content size.

[Hello]
[Hello world]

Currently

[Hello                   ]
[Hello world             ]

https://jsfiddle.net/v6cgLjbd/8/

<span class='box'>
  <span class='item'>Hello</span>
  <span class='item'>Hello World</span>
  <span class='item'>Hello lOOOOONG text</span>
</span>

.box {
  height: 200px;
  width: auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.item {
  background-color: gray;
  flex: 0 0 auto;
  width: auto;
}

score 4 · Accepted Answer · answered Aug 14 '17 at 19:42

4

You need to add align-items: flex-start on flex-container. When you use flex-direction: column on parent element, with flex property on child elements you control height not width.

.box {
  height: 200px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.item {
  background-color: gray;
}

<span class='box'>
  <span class='item'>Hello</span>
  <span class='item'>Hello World</span>
  <span class='item'>Hello lOOOOONG text</span>
</span>

answered Aug 14 '17 at 19:42

Nenad Vracar

111,264
15
131
153

Thanks very much! I did not know align-items have effect on the width. Good to know. – Meow Aug 14 '17 at 20:08
You're welcome. – Nenad Vracar Aug 14 '17 at 20:09

How to set width based on content length using flex

1 Answers1