Flex Items Ignoring Width

flex items ignoring width

When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:

• flex-direction: row - flex items will align horizontally
• justify-content: flex-start - flex items will stack at the start of the line
• flex-wrap: nowrap - flex items are forced to stay in a single line
• flex-shrink: 1 - flex items are allowed to shrink

Note the last two settings.

Your three divs are forced to remain in a single line. Hence, their combined width is limited to the width of the container.

Also, they are allowed to shrink, which prevents them from overflowing the container. This also limits their width.

To apply whatever width you want to each flex item you can override these initial settings with:

1. flex-wrap: wrap - now there's more space because flex items can break to new lines
2. flex-shrink: 0 - now there's more space because flex items will not shrink and can overflow their container if necessary

Width ignored on flexbox items

Remove the width on .container > div and use flex: auto; on #main: fiddle

#main {
   flex: auto; 
   background: lightblue; 
  -webkit-order: 2;
   order: 2;     
}

Flexbox container issue, ignoring width and height

I just added a flex-shrink:0; to .image, and it works :)

.slider {  align-items: flex-start;  display: flex;  flex-direction: column;  }  .items {   justify-content: center;  margin: 0 auto;  position: relative;  display: flex;}
.item {display: flex;flex-direction: row;left: 0;outline: 0;top: 0;opacity: 0;position: absolute;visibility: hidden;z-index: -1;}
.item.show {    position: relative;    opacity: 1;    visibility: visible;    z-index: 9;}
.image { height: 5.5rem;margin: 0 0.5rem 0 0;width: 5.5rem;align-items: center;padding: .5rem;display:flex;border: 1px solid black;flex-shrink: 0;}
.image img {     display: block;    margin-left: auto;    margin-right: auto;    max-height: 100%;    max-width: 100%;}
}

<div class="slide">  <div class="items">    <div class="item show">      <div class="image">         <img src="https://via.placeholder.com/150">       </div>       <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of</div>       </div> <div class="item">      <div class="image">         <img src="https://via.placeholder.com/150">       </div>       <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a  software like Aldus PageMaker including versions of Lorem Ipsu</div>       </div>       </div> </div> </div>

Flex box ignoring width if input in flexitem

Flexbox items has a min-width that defaults to auto, which means they won't shrink below their contents width.

In this case your input element has a default width set in the user agent style sheet, which then dictate the size of the flex item.

Give the ele a min-width: 0 and it will work as expected.

.wrapper {  width: 200px;  display: -webkit-flex;  display: flex;  -webkit-align-items: center;  align-items: center;  -webkit-justify-content: center;  justify-content: center;  flex-direction: row;}
.ele {  display: -webkit-flex;  display: flex;  -webkit-align-items: center;  align-items: center;  -webkit-justify-content: center;  justify-content: center;  flex-direction: row;  flex: 3;  min-width: 0;}
.ele1 {  flex: 1;}
.ele input {  display: inline;  max-width: 100%;}

<div class="wrapper">  <div class="ele ele3" style="background-color: red;">    <input type="number" value="9999" />  </div>  <div class="ele ele1" style="background-color: green;">    2  </div>  <div class="ele ele3" style="background-color: yellow;">    <input type="number" value="9999" />  </div></div>

Flexbox not respecting width

An initial setting of a flex container is flex-shrink: 1.

This means that a flex item is allowed to shrink, in order to not overflow the container.

Instead of width: 290px try this:

flex: 0 0 290px; /* can't grow, can't shrink, fixed at 290px */

Or just add flex-shrink: 0 to the rule (.callout-panel) in order to disable shrinking.

For more details see:

• What are the differences between flex-basis and width?
• Flexbox - two fixed width columns, one flexible

max-width not working on flex item

In addition to Michael_B's answer, in this case it is the margin: 0 auto that cause the .intro to collapse, so if you remove it, its width will not collapse to its content, but that will also make the centering of it to not work as well.

Another solution would be to delete the intro rule and move its properties to the h1 instead (all but flex-shrink: 0).

html, body { margin: 0; }
.hero_image {  min-height: 100vh;  display: flex;  flex-direction: column;  background-color: yellow;}
.impact_image {  flex-grow: 1;  background-image: url(https://s16.postimg.org/cjw1kzkkl/circles.png);  background-position: center bottom;  background-size: cover;}
.intro h1 {  max-width: 600px;  margin: 0 auto;  font-size: 20px;  background-color: pink;}

<div class="hero_image">  <div class="impact_image"></div>  <div class="intro">    <h1>XYZ brand consultancy<br>making a difference</h1>  </div></div>

Width of flex item is shrinking

I need to understand why does width not work while min-width works...

Because flex items are set, by default, to flex-shrink: 1, which means that they can shrink in order to minimize overflow of the container.

Your actual code (what the browser sees) is this:

#desktop_sidemenu {
   width: 200px;   /* author defined */
   flex-shrink: 1; /* default setting */
}

You need to disable flex-shrink:

#desktop_sidemenu {
   width: 200px;
   flex-shrink: 0;
}

Now, because the item can't shrink below 200px, it's equivalent to min-width: 200px.

For more details, see "The flex-shrink factor" in my answer here:

• What are the differences between flex-basis and width?

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. (The column setting is also the reason why display: inline-flex isn't working.)

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?

Parent flexbox container ignores child's flexbox min-width

To understand this, simply add border with different colors to your items and you will see that you have overflow at different levels. More precesily, we have only one overflow that is moving to a lower lever after adding each min-width.

.body {  width: 300px;  border: 1px solid black;  padding: 8px;  background-color: #ccc;}
.flex {  display: flex;}
.flex-column {  display: flex;}
.item {  padding: 8px;  background-color: #fff;  overflow-wrap: break-word;}

<div class="body">  <div class="flex" style="border:5px solid red;">    <div class="flex" style="border:5px solid green;">      <div class="flex" style="border:5px solid blue;">        <div class="flex-column" style="border:5px solid yellow;">          <div class="item" style="border:5px solid pink;">            This is SpFlex Items Ignoring WidthFlex Items Ignoring WidthrrrrrrrrrrrrrttttttttttttttFlex Items Ignoring WidthFlex Items Ignoring Widthaaaaaa!11 It's not a bug. Firefox is correctly implementing min-width: auto for flex items. When you change it to min-width: 0, you're just using a different value for min-width to get            your example looking how you want it to look. But both values are being rendered correctly.          </div>        </div>      </div>    </div>  </div></div>

---

Related Topics