113

I have a flex container with justify-content: flex-start. There ends up being overflow on the right side due to the flex items taking less space than the size of the container.

Aside from setting an explicit width on the flex-container, is there a way of just having the equivalent of width: auto to remove the overflow?

peterh
  • 11,875
  • 18
  • 85
  • 108
BOverflow
  • 1,283
  • 2
  • 11
  • 11
  • Flex boxes are pretty damn tricky… and they still have a lot of work to go before they are actually reliable. But this link can help: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – BuddhistBeast Jan 08 '14 at 00:15
  • Hmm...can you [show a demonstration](http://jsfiddle.net)? – Passerby Jan 08 '14 at 03:41
  • 1
    you are talking of "overflow" and "less space" but you probably mean "underflow" and "less space" or "overflow" and "more space". clarify your question –  Jan 08 '14 at 04:03
  • 2
    Any answers for this??? I've created a fiddle to demonstrate a similiar issue i'm facing: http://jsfiddle.net/fxz6o726/ – amit Feb 03 '15 at 11:15
  • In the past, I've seen this accomplished with `flex-basis: auto`, but it seems like we're in a transitional state where Blink is preparing to add `flex-basis: content`, which should accomplish exactly what you're asking for. – Kyle Feb 04 '16 at 20:15
  • If you use `display: inline-flex;` and you set for the same element: `width: min-content;` then you have the same size as with `display: inline-block;` – Avatar Jun 25 '22 at 18:51

5 Answers5

121

If you mean you want the container to be the width of the items, rather than the items expanding to the container width...

You may be able to get that by changing display:flex to display:inline-flex

Mahks
  • 6,441
  • 6
  • 28
  • 31
  • 10
    `inline-flex` doesn't help in my case, and actually, should it? Isn't that impossible? Like when you set `inline-block` for container and `width: 100%` for block items inside, the container won't resize to its `max-width` but rather container and items will stay with minimal possible widths. Wouldn't it work similar for flexbox? – JoannaFalkowska Jun 27 '16 at 09:41
  • 3
    `display:inline-flex` solved a similar issue in my case – Giorgio Tempesta Oct 07 '19 at 12:51
  • Worked perfect in my case. Just was required additional min-width="100%" – Alex Vovchuk Jun 18 '20 at 20:25
  • This method only works if your flex items fit in just **one row**. – Hassan Mahdian Manesh May 15 '23 at 09:42
32

  1. width: min-content (CSS3 "intrinsic" as opposed to "extrinsic")

  2. display: inline-flex if you don't care whether it's inline

If you use width: min-content on a paragraph, the longest word determines the width.

.flex-container {
  display: flex;
}

.flex-inline-container {
  display: inline-flex;
}

.width-min-content {
  width: min-content;
}

.row-direction {
  flex-direction: row;
  border: 0.0625rem solid #3cf;
 }
.col-direction {
  flex-direction: column;
  border: 0.0625rem solid magenta;
}
flex
<div class='flex-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
flex width: min-content
<div class='flex-container width-min-content row-direction'>
  <input />
  <input type='datetime-local'>
</div>
<div class='flex-container width-min-content col-direction'>
  <input />
  <input type='datetime-local'>
</div>
<br>
inline-flex
<div class='flex-inline-container row-direction'>
  <input />
  <input type='datetime-local'>
</div>

<div class='flex-inline-container col-direction'>
  <input />
  <input type='datetime-local'>
</div>
neaumusic
  • 10,027
  • 9
  • 55
  • 83
22

This one worked for me on the same inline-flex (or flex) element:

   width: fit-content;
Corey Bo
  • 371
  • 2
  • 7
3

As suggested by Mahks, you can make the flex container inline. But if laying it inline is not suitable for your layout, an alternative is to float the flex container (not the flex items).

Floats will shrink-wrap to fit their contents, and this is no different for a block-level flex container. An inline-level flex container behaves similarly to an inline-block box when laid out in its parent inline formatting context, which means it will also shrink to fit its contents by default.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • If you're supporting older Firefox browsers, using floats will cause Bad Things (tm) to happen (see: https://bugzilla.mozilla.org/show_bug.cgi?id=660699) – cimmanon Sep 21 '14 at 23:54
1

not sure about your question, but:

DEMO: http://jsfiddle.net/jn45P/

you just need to enable the flexibility on the flex items, using flex-grow:1; to fill up the space

<div class="o">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

<div class="o flex">
    <div>a</div><div>a</div><div>a</div><div>a</div><div>a</div>
</div>

div.o
{
    border:2px red solid;
    padding:2px;
    width:500px;
    flex-direction:row;
    display:flex;
    justify-content:flex-start;
}

div.o > div
    {border:2px red solid;margin:2px;}

div.o.flex > div
    {flex:1 1 auto;} /* enable flexibility on the flex-items */