Width Ignored on Flexbox Items

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;     
}

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

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

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>

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>

Max-width not working on Flexbox item (item is shrinking to width of content)

The default "width" (actually flex-basis) inside flex-containers is auto which makes it only as wide as it's content.

But adding width:100% to the flex item doesn't work. At smaller viewport sizes the the width and padding don't play nicely and the heading is cropped off the right hand edge.

Then I'd suggest a couple of changes. Don't use a flex-column but position your .main div using align-items:flex-end.

Then set the default "width" (actually flex-grow) with flex: 1.

.hero_image {  min-height: 50vh;  /* for example */  background-color: yellow;  display: flex;  align-items: flex-end;  justify-content: center;}
.main {  flex: 1;  max-width: 50%;  /* for example */  margin: 0 auto;  padding: 0 50px;  background-color: pink;}

<div class="hero_image">  <div class="main">    <h1>Heading <br>couple of words</h1>  </div></div>
<div class="main">  <p>Lots of text</p></div>

Why are my flexbox items misaligned when the parent width changes?

Use flex: 1; instead of flex-grow: 1;.

flex: 1; is a shorthand for:

flex-grow: 1; = Element will grow in same proportion as the window-size

flex-shrink: 1; = Element will shrink in same proportion as the window-size

flex-basis: 0; = Element does not have a starting value as such and will
take up screen as per the screen size available for e.g:- if 3 divs are in the wrapper then each div will take 33%.

Source for above: https://stackoverflow.com/a/37386525/14776809

.timeline {
  display: flex;
}

.timeline>div {
  display: flex;
  border: 1px solid red;
  flex: 1;
}

.events {
  width: 50%;
}

.date,
.relative,
.events {
  border: 1px solid green;
}

.date,
.relative {
  width: 80px;
}

<!DOCTYPE html>
<html lang="fr">

<head></head>

<body>
  <div class="timeline">
    <p class="date">a1</p>
    <p class="relative">a2</p>
    <div>
      <div class="events"></div>
      <div class="events"></div>
    </div>
  </div>

  <div class="timeline">
    <p class="date">b1</p>
    <p class="relative">b2</p>
    <div>
      <div class="events">
        <p>Lorem ipsum</p>
      </div>
      <div class="events">
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ium Lorem ipsum Lorem ipsum Lorem ipsum</p>
      </div>
    </div>
  </div>
</body>

</html>

Flex box max-width not working when shrinking the width of the page

Because max-width is not the same as width.

You have to tell the element to expand as much as possible to it's max-width, in this case with flex:1

.parent{
  border: 1px solid red;
  width: 50%;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;  
}

.parent div {
  background-color: yellow;
  width: 50%;
  min-width: 150px;;
  max-width: 100%;
 flex:1;
}

.parent div:last-child{
  background-color: red;
  margin:0 auto;
}

 <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

Flexbox ignores padding & width on links

If you add display: flex to your list items, they will force the child element (<a>, in this case) to stretch the full height of the container.

This is a default setting in a flex container – align-items: stretch

Just add this to your code:

li {
    display: flex;
}

https://codepen.io/anon/pen/JJBePq

---

Related Topics