0

I am trying to ensure that the width of a div that uses display: flex is equal to the width of its content.

Below is an example:

#eventDetailElements {
  display: flex;
  flex-wrap: wrap;
  align-items: left;
  justify-content: left;
  line-height: 175%;
  margin: 3%;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
}
<div id='eventDetailElements'>
  <div className='eventDetail'><strong>Location: </strong>Lorem ipsum</div>
  <div className='eventDetail'><strong>Starts: </strong> Lorem ipsum</div>
  <div className='eventDetail'><strong>Ends: </strong> Lorem ipsum</div>
  <div className='eventDetail'><strong>Organiser: </strong>The Organiser</div>
  <div className='eventDetail'><strong>Cancellation Policy: </strong>Lorem ipsum</div>
</div>

It displays like this: display:flex

The width is too long.

I have tried changing my CSS to display: inline-flex but I get this result:

display:inline flex

It is still wider than the content and have moved the last element onto another line.

Where am I going wrong?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Colfah
  • 308
  • 1
  • 16
  • The code you posted works fine for me if I change it to inline-flex. do you have any other CSS that is affecting these elements? – FluffyKitten Sep 18 '20 at 20:31
  • Ok, I've tried with different values and display-inline only works when it doesn't wrap. It looks like this is a problem with CSS when it doesn't know what width the children are. The link below has possible solutions. – FluffyKitten Sep 18 '20 at 20:45
  • Does this answer your question? [Make container shrink-to-fit child elements as they wrap](https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap) – FluffyKitten Sep 18 '20 at 20:45

1 Answers1

0

You can simply set the min-width property statically to make the width of your container not to shrink while the screen size change like the following

Example

#eventDetailElements {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: left;
  justify-content: left;
  line-height: 175%;
  min-width: 820px;
  margin: 3%;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
}
<div id='eventDetailElements'>
  <div class='eventDetail'><strong>Location: </strong>Lorem ipsum</div>
  <div class='eventDetail'><strong>Starts: </strong> Lorem ipsum</div>
  <div class='eventDetail'><strong>Ends: </strong> Lorem ipsum</div>
  <div class='eventDetail'><strong>Organiser: </strong>The Organiser</div>
  <div class='eventDetail'><strong>Cancellation Policy: </strong>Lorem ipsum</div>
</div>

but if you don't want to set the min-width property statically you can simply set it dynamically but detecting the width of your container by using JavaScript and set it to your CSS but when the detection happens when screen is on shrink the width will detected is that width so make sure that the detection happens when screen is on full size

Example

let styles = window.getComputedStyle(eventDetailElements);
let wide = Math.floor(styles.getPropertyValue('width').slice(0, -2)) + 2;
eventDetailElements.style.setProperty('--w', wide + 'px');
#eventDetailElements {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: left;
  justify-content: left;
  line-height: 175%;
  min-width: var(--w);
  margin: 3%;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
}
<div id='eventDetailElements'>
  <div class='eventDetail'><strong>Location: </strong>Lorem ipsum</div>
  <div class='eventDetail'><strong>Starts: </strong> Lorem ipsum</div>
  <div class='eventDetail'><strong>Ends: </strong> Lorem ipsum</div>
  <div class='eventDetail'><strong>Organiser: </strong>The Organiser</div>
  <div class='eventDetail'><strong>Cancellation Policy: </strong>Lorem ipsum</div>
</div>
Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39