How to Get Flexbox to Respect Removed Elements

How to get flexbox to respect removed elements?

I figured this one out...

Add these two properties to the li elements...

-webkit-box-flex: 1;
min-height: 0;

jsFiddle.

Now, when you remove the first element, the others shrink to fit.

CSS flex box last space removed

Reason

When you don't use display: flex, the your layout becomes something like

<div class="has_flex"><!--
  --><anonymous style="display: inline">Some text </anonymous><!--
  --><a         style="display: inline">Link</a><!--
--></div>

The text (including the space at the end) is wrapped inside an anonymous inline box:

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

However, Flexbox layout blockifies the flex items:

The display value of a flex item is blockified: if
the specified display of an in-flow child of an element
generating a flex container is an inline-level value, it computes
to its block-level equivalent.

Then, the layout will be like

<div class="has_flex"><!--
  --><anonymous style="display: block">Some text </anonymous><!--
  --><a         style="display: block">Link</a><!--
--></div>

This might not seem directly related, but it's relevant because of the white-space processing model:

Then, the block container's inlines are laid out. [...] As each line
is laid out, [...]

If a space (U+0020) at the end of a line has white-space
set to normal, nowrap, or pre-line, it is also removed.

So when the anonymous element and the link were both inline, the space was at the middle of a line. If you had multiple spaces they would collapse into a single one, but not disappear completely.

However, when you use flexbox, each flex item has its own lines, and the space is therefore at the end of a line. So it's removed.

Note this problem is not specific of flexbox, spaces at the end of an inline-block are also removed.

.in-blo {  display: inline-block;}

<div><span class="inline">Some text </span><a href="link">Link</a></div><div><span class="in-blo">Some text </span><a href="link">Link</a></div>

Using flexbox, vertically center items and respect top 150px space of flexbox container

This might work for you:

HTML (add two invisible flex items)

<div class="parentFlexBox">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
    <div class="itemC">C</div>
    <div class="itemD">D</div>
    <div class="itemE">E</div><!-- invisible spacer item with 150px height -->
    <div class="itemF">F</div><!-- invisible spacer item with 120px height -->
</div>

CSS

.parentFlexBox { justify-content: space-between; } /* changed from `center` */

.itemA { order: 1; } /* removed `margin-top: auto` */

.itemB { order: 2; } 

.itemC { order: 3; }

.itemD { order: 5; height: 30px; } /* added `height` for centering calculation;
                                      removed `margin-top:auto` */
.itemE { 
      order: -1;  
      flex: 0 0 150px; /* don't grow, don't shrink, remain at 150px height */
      visibility: hidden;
      margin-bottom: auto; /* stick to top of container */
}

.itemF {
      order: 4;
      flex: 0 1 120px; /* don't grow, shrink proportionally, start at 120px height */
      visibility: hidden;
      margin-top: auto; /* go south as much as possible (sticks to Item D) */
}

/* NOTE: Item D has height 30px. Item F has height 120px. Together they equal height of
   Item E. Equally balanced on both ends, Items A, B & C are centered in the container. */

DEMO 1

I placed the spacer divs last in the mark-up to keep with the alphabetical ordering. If you prefer to list all divs (including spacers) in order, that would eliminate the need for the order property.

Also, in the demo, the code includes borders, in case you want to see the spacers at work. Just disable the visibility property.

Update (based on comment)

Nice, a couple of questions though: 1) Possible to make it so that BCD don't change height when resizing the window? 2) Possible to make the gray background extend to contain D when window is short? 3) Possible to do items E and F as pseudocode elements?

Question #1: Yes. Add flex: 0 0 <<absolute height>> to BCD. For instance, add flex: 0 0 50px to each item, which tells them to stay fixed at 50px height. (Also, remove the height property from each rule, to avoid any potential conflict with flex.)

Question #2: Yes. Instead of limiting the container to height: 100vh, use min-height: 100vh.

Question #3: Yes. Remove the E and F code from the HTML and CSS, and add this to the CSS:

.parentFlexBox::before {
  content: '';
  flex: 0 0 150px;
  visibility: hidden;
  margin-bottom: auto;
}

.parentFlexBox::after {
  content: '';
  flex: 0 1 100px;
  visibility: hidden;
  margin-top: auto;
  order: 4;
}

DEMO 2

How to remove default space when using flex-box?

Solution (By Using a new div.sub-container):-

Flexbox grows in one direction either row or column. as your question deals with more than one direction (first div-row wise achievable. and others are column wise achievable) i have added one more div(div.sub-container) with flexbox and changed the height according to the div.sub-container.

html,body{  height:100%;  width:100%;  overflow: hidden;  margin: 0px;  }#parent-container {    display: flex;    width:100%;    height: 100%;    flex-wrap: wrap;    /*justify-content:space-between;    flex-direction: column;*/}
#rd-box{   width:100%;   background-color:rgba(176,39,39,1);   height: 25%;}
#sky-box{    height: 50%;    background-color: rgba(0,255,255,1);}
#yllw-box{    height: 25%;    background-color: rgba(255,242,0,1);}
#grn-box{    height: 37.5%;    background-color: rgba(0,255,0,1);}
#bl-box{    height: 37.5%;    background-color: rgba(0,33,87,1);}
/*---common  styles----*/
.wd-half{    width: 50% ! important;}
.item{    margin:  0px ! important;}.sub-container{    height: 75%;    width: 100%;    display: flex;    flex-direction: column;    flex-wrap: wrap;}/*newly calculated height with respect to sub-container*/.sub-container #sky-box{    height: 66.6666666667%;}.sub-container #yllw-box{    height: 33.3333333333%;}.sub-container #grn-box{    height: 50%;}.sub-container #bl-box{    height: 50%;}

    <body>        <div id="parent-container">            <div id="rd-box" class="item">  </div>            <div class="sub-container">            <div id="sky-box" class="item wd-half"> </div>              <div id="yllw-box" class="item wd-half"></div>                <div id="grn-box" class="item wd-half"> </div>                           <div id="bl-box" class="item wd-half">  </div>                        </div>        </div>    </body>

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 Item only respecting margin or padding when both are set

You also have to write box-sizing for the elem class as well. Due to the dimension of the elements that include padding and maybe borders in future. Because box-sizing property allows us to include the padding and border in an element's total width and height. I hope it helped :)

How can I have a position: fixed; behaviour for a flexbox sized element?

You can't.

As explained by the CSS2.1 spec:

Absolutely positioned boxes are taken out of the normal flow.

And the Flexible Box Layout spec confirms that:

An absolutely-positioned child of a flex container does not
participate in flex layout. However, it does participate in the
reordering step (see order), which has an effect in their
painting order.

^{(Emphasis mine)}

Flexbox and overflow: hidden not working properly

Your problem is caused by setting the flex-basis of .flex > div to auto. This causes the div to expand to accommodate its content as it has no set dimension along the flex axis. Give it a set value like 20px and the space will be evenly divided because flex-grow is set to 1.

This article should help you get started with the flex layout.

Here is a modified version of your code

.flex {
  display: -webkit-box;
  display: flex;

  height: 100px;
  width: 100%;
}

.flex > div {
  flex-grow: 1;
  flex-shrink: 1;
  /* set value for the flex basis, the two properties above will evenly 
  divide the space. */
  flex-basis: 20px;

  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;

  margin: 15px;
  overflow: hidden;
}

.example {
  overflow: hidden;
  border: 1px solid black;
}

.example .wide {
  width: 400px;
  height: 10px;
}

Flexbox flex-grow property not respected when flex item contains an input element

You may use the flex shorthand flex:2 / flex: 5 instead flex-grow:2 / flex-grow:5 .

It will avoid to have to set flex-shrink and flex-basis too.

input / button elements not shrinking in a flex container

An input element, unlike a div, comes with a default width.

Here's a simple illustration of this setting:

Sample Image

The browser automatically gives the input a width.

input {  border: 1px solid blue;  display: inline;}
div {  border: 1px solid red;  display: inline;}

<form>  <input>  <br><br>  <div></div></form>

How to Get Flexbox to Respect Removed Elements