Make Flex Items Take Content Width, Not Width of Parent Container

Make flex items take content width, not width of parent container

Use align-items: flex-start on the container, or align-self: flex-start on the flex items.

No need for display: inline-flex.

An initial setting of a flex container is align-items: stretch. This means that flex items will expand to cover the full length of the container along the cross axis.

The align-self property does the same thing as align-items, except that align-self applies to flex items while align-items applies to the flex container.

By default, align-self inherits the value of align-items.

Since your container is flex-direction: column, the cross axis is horizontal, and align-items: stretch is expanding the child element's width as much as it can.

You can override the default with align-items: flex-start on the container (which is inherited by all flex items) or align-self: flex-start on the item (which is confined to the single item).

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Make flex item have same width as parent

You can set flex: 0 0 100% (don't grow, don't shrink, base width is 100% of parent) on the divs:

.slider-container {  width: inherit;  height: 40em;  overflow: hidden;  margin-bottom: 1000px;}
.slider {  display: flex;  height: inherit;  transform: translateX(-100px);}
.item {  flex: 0 0 100%;}
.x {  background-color: green;}
.y {  background-color: red;}
.z {  background-color: blue;}

<div class="slider-container">  <div class="slider">    <div class="item x">XXXXX</div>    <div class="item y">YYYYY</div>    <div class="item z">ZZZZZ</div>  </div></div>

Make flex container take width of content, not width 100%

Instead of display: flex on the container, use display: inline-flex.

This switches the container from block-level (which takes the full width of its parent) to inline-level (which takes the width of its content).

This sizing behavior is similar to display: block vs. display: inline-block.

For a related problem and solution see:

Make flex items take content width, not width of parent container

Why is flex div 100% width of parent div?

Your #flex div has display: flex applied. That's a block-level command (such as display: block) which, by design, occupies the full width of the parent. Use display: inline-flex instead.

Shrink flex item to fit content

Align the flex items to the start side of the cross-axis. See https://css-tricks.com/snippets/css/a-guide-to-flexbox.

body {
  display: flex;
  flex-direction: column;
  align-items: start;
}

a {
  background: lightGreen;
}

<a href="#">This is some text.</a>
<a href="#">This is some longer text.</a>

Using Flex, how to make right most div overlap left div as parent div width decreases

.left{
overflow: hidden;
}
.parent{
width:100%;
}

Adding an overflow property to the left div will hide the text as the right text overlaps it in combination with a parent that is 100% width. Works like a charm.

Make Flex Items Take Content Width, Not Width of Parent Container