1

I have a container with two flex items. The last flex item is also a flex container which allows its flex items to wrap. My goal is for that last flex item to only occupy as much space as needed, so that when its children wrap, the two main flex items can be centered within the main flex container.

In other words, I would like the red div to only be as wide as necessary, so that the blue and red divs can be centered within the green div. No matter what classes I apply I can't seem to get this to work.

In this example I am using Tailwind classes, but it's still a general CSS question.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css" rel="stylesheet"/>
<div class="border-2 border-green-500 flex items-center justify-center" style="width:700px;">
  <div class="border-2 border-blue-500 mr-2">
    Left
  </div>
  <div class="border-2 border-red-500 flex flex-wrap">
    <span>Right side has much longer text that I would like to wrap.</span>
    <span>When it wraps why is the red parent still full width?</span>
  </div>
</div>

Here's a JSFiddle: https://jsfiddle.net/flyingL123/26jxpqez/12/

TylerH
  • 20,799
  • 66
  • 75
  • 101
flyingL123
  • 7,686
  • 11
  • 66
  • 135
  • You haven't shown any of your relevant CSS in either your question or the JS Fiddle; please do, otherwise it seems we're unlikely to reproduce your problem. – David Thomas Jan 06 '20 at 14:49
  • you cannot do this – Temani Afif Jan 06 '20 at 16:09
  • @TemaniAfif are those duplicates you referenced specific to inline elements though? Even if I try with block level elements the same issue is occurring. – flyingL123 Jan 06 '20 at 16:33
  • 2
    it's not really inline or block but *shrink-to-fit* element. Flex items are block level items but they are shrink to fit (their width is based on their content) like inline-block, float, position:absolute,etc and in all theses cases you cannot achieve what you want. – Temani Afif Jan 06 '20 at 16:38

1 Answers1

-1

Set the flex-basis CSS property of the right div to 0.

Example

Edit: If you want the div to take up more width, you can replace 0 with some other value, e.g. 200px.

Jack
  • 88
  • 6
  • That doesn't work for me. The text in the red div spills outside of it and the centering is off. – flyingL123 Jan 06 '20 at 16:02
  • Huh. It seems to work for me on both Firefox and Chrome. Take a look at the example link I just added. – Jack Jan 06 '20 at 16:06
  • Looking at your example, I'm not sure that's the result OP or anyone would really want... (e.g. wrapping every word to a new line) – TylerH Jan 06 '20 at 16:06
  • @TylerH OP said they wanted the red div "to only occupy as much space as needed." See my edit for a clarification. – Jack Jan 06 '20 at 16:14
  • @Jack I imagine they want the div to take up as much as space as the longest span, with each span being on a different line (e.g. how it works currently, except with the red div shrinking to fit). – TylerH Jan 06 '20 at 16:17
  • @TylerH In that case I think the only solution would involve computing the width of each span in JavaScript, no? – Jack Jan 06 '20 at 16:21
  • @Jack Likely -- that's the result given by Michael_B in one of the two duplicate targets. – TylerH Jan 06 '20 at 16:47