How to adapt a flex div's width to content

Question

My idea is to give an adaptive div width. When I have just one item, the width should be the same as the item within the container div.

Any suggestion on how to do this?

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

score 86 · Accepted Answer · answered May 18 '16 at 13:15

86

You can use display: inline-flex

#container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 200px;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}
#container .item {
  width: 80px;
  height: 50px;
  background-color: red;
  margin: 10px;
}

<div id="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div id="container">
  <div class="item"></div>
</div>

answered May 18 '16 at 13:15

Nenad Vracar

118,580
15
151
176

I have a concern about inline-flex because of browser support vs browser interpretation, but this solution definitely solved my problem! Thanks. – Tomás Francisco May 18 '16 at 13:21
What do you mean by `browser interpretation`? – Nenad Vracar May 18 '16 at 13:24
By my experience, inline-flex has different results cross browser – Tomás Francisco May 18 '16 at 13:26
3

@NenadVracar I think he meant *implementation*. – TylerH May 18 '16 at 13:36
7

For anyone looking for a **wrapping** flex whose width adapts to how many items fit on one line - this doesn't work. I.e. this solution works if I only have 1 item (flex will have its width), but if I have 10 items of 80px width each, and there's 200px max that the flex can have, it'll not become 160px wide with 5 rows. It'll be 200px wide with 5 rows (and lots of empty space inside the flex on the right side). :( Later: apparently, what I'm hoping for just can't be done: http://stackoverflow.com/questions/37406353 – Jan Żankowski Apr 11 '17 at 07:30
The wording doesn't make sense though 'inline-flex' would suggest it's 'inline'. – Oliver Dixon Mar 06 '21 at 19:40

score 6 · Answer 2 · answered May 16 '22 at 09:11

6

I believe these two are what you need

display: inline-flex;
width: min-content;

answered May 16 '22 at 09:11

benjarlett

63
1
3

score 0 · Answer 3 · answered Nov 23 '22 at 09:44

If I understood your question correctly:

This is what you are looking for, which is achievable through GRID:

 grid-template-columns: repeat(auto-fit, minmax(100px, auto));

.zz {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
  padding: 10px 40px;
  background: pink;
  gap: 10px;
  margin-right: auto;
}

span.x{
  align-self: flex-start;
  padding: 5px 40px;
  background: white;
}

<div class="container">
  <div class="zz" href="#">
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
    <span class="x">c<!--  --></span>
  </div>
</div>

How to adapt a flex div's width to content

3 Answers3