How the width of a inline-flex div is decided? - html

for an inline-flex div, the width is depending on its children elements' width. Here is the code, I don't set the parent div with specified width. So, it is decieded by inside elements.
For the three children elements, one is with width:50%, others are width:50px, but the final width for 2 is 31.75, how does it come?
<div style="display: inline-flex;flex-wrap: nowrap;">
<div style="width:50%;color:red">1</div>
<div style="width:50px;color:blue">2</div>
<div style="width:50px;color:black">3</div>
<span>hello</span>
</div>

Here is a step by step illustration to understand what the browser is doing:
div div {
outline:1px solid green
}
<p>The browser will first ignore the width:50% and use auto instead</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
<div style="width:auto;color:red">1</div>
<div style="width:50px;color:blue">2</div>
<div style="width:50px;color:black">3</div>
<span>hello</span>
</div>
<p>Now that we have the width of the parent, it will no more change and we resolve width:50%</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
<div style="width:50%;color:red">1</div>
<div style="width:50px;color:blue">2</div>
<div style="width:50px;color:black">3</div>
<span>hello</span>
</div>
<p>all the div will shrink because there is not enough space for them (50% + 50px + 50px + hello > 100%). A shrink that you can disable if you use flex-shrink:0 and you will have overflow</p>
<p>Only "hello" will not shrink because a flex item cannot shrink past its content size</p>
<div style="display: inline-flex;flex-wrap: nowrap;border:2px solid red">
<div style="width:50%;color:red;flex-shrink:0;">1</div>
<div style="width:50px;color:blue;flex-shrink:0;">2</div>
<div style="width:50px;color:black;flex-shrink:0;">3</div>
<span>hello</span>
</div>
For more detail about the shrink algorithm if you want to understand the calculation:
How flexbox calculates flex-item's width if no flex-basis or width are set?
Why is a flex item limited to parent size?
To understand why "hello" will not shrink:
Why don't flex items shrink past content size?
The purple area you see in the dev tools is the width before the shrink effect. You can notice it's equal to 50px for the 2nd and 3rd div

Related

Bootsrap Fixed & Resppnsive div height

I would like to have a fixed responsive div height.
Here is the example:
<div class="col-md-12">
<div class="col-md-8"> //here there is an Image with 800px height </div>
<div class="col-md-4" style="background:#eee">
<div class="col-md-12" style="background:black">
//here there is text and height = 350px height
</div>
</div>
</div>
I would like to fix the height of my black div as the height of my image. Also i would like to make it responsive..
Use flex.
align-items: stretch; stretch items to its parent height and flex-wrap: wrap make it wrap.
See preview in codepen:
Preview

Smart / liquid inline spacing of divs

I have a container, with two containers inside of it.
<div id="container">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3...4...">
</div>
</div>
I want the main container to span the entire width of the page. (Width: 100%;)
I want the two child containers to evenly spread and fill the horizontal space on the page.
I want to be able to add say a third or even forth child container and have them all fill from 50% 50% to ~33% ~33% ~33% to 25% 25% 25% 25% and so on...
If there a way to do this easily? Sorry if I didn't explain this well, it is my first time asking a question.
Simply use flex by specifying display:flex on the container and then flex:1 (or flex-grow:1 on the child elements like this :
.container {
display: flex;
}
.container .box {
flex: 1; /*or also `flex-grow:1` */
min-height: 100px;
border: 1px solid red;
}
<!-- container with 2 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 3 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<!-- container with 4 elements -->
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
Refering to the documentation :
The flex-grow CSS property specifies the flex grow factor of a flex
item. It specifies what amount of space inside the flex container the
item should take up. The flex grow factor of a flex item is relative
to the size of the other children in the flex-container.
You can read more about flex property and flex-grow property

Overlaying an item on top of something with display: table-cell and min-height

When using display: table-cell it's not possible to give that element position:relative. So in order to overlay the entire element with something (e.g a translucent div) you first have to wrap the contents in a div with position:relative and then put the overlay inside there.
But when I set a minimum height on the wrapper too then the overlay doesn't extend to the full height and I can't seem to find a way to make the wrapper's contents height-aware. Is there away, using just css, to have a 100% height overlay on top of a div with display:table-cell and minimum height?
<div style="table-row">
<div style="table-cell; min-height: 100px">
<div style="position: relative; height: 100%;"> // this refuses to extend to 100% height when the table row forces the cell height to grow
<p> content </p>
<div style="position:absolute; top:0;left:0;height:100%;width:100%"> // ... therefore so does this
</div>
</div>
</div>
<div style="table-cell; height: 150px"></div> // forces the entire row to grow in height
</div>

Css - Don't want elements below my floated element

I have a floated div with "sidebar" text. Its parent container has text as well.
I don't want to have text below my floated "sidebar" div:
example http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png
How can I fix this?
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
If it doesn’t mess up anything else, you can use overflow: hidden or overflow: auto to fix this:
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<div class="next-to-float" style="overflow: hidden;">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
See http://jsfiddle.net/pauldwaite/YL5P3/
I’ve written about this more fully here, including code to make it work in IE 6: xHTML/CSS: How to make inner div get 100% width minus another div width
I still don’t really understand the reasoning behind why overflow: hidden does this, but I understand that it does follow from the CSS spec.
Set right margin on non-floated element
JSFiddle
The only requirement is that you must predefine your floated element's width. Then it can have whatever height you like and the non-floated content (when applied right margin) won't stretch under floated element.
How it works?
We have floated element on the right with width = X
We have usual content but set its right margin = X+s where s is some predefined space between your content and floated element so they don't touch.
And that's it.
Since you have multiple content elements (heads, paragraphs) you have to put them inside a container with this right margin setting.
<div id="parent">
<div id="floated">Foo bar</div>
<div id="content">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
And CSS:
#floated
{
float: right;
padding: 1em;
background: #ccc;
width: 10em;
}
#content
{
margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}
Why is this solution better than setting main content width?
Because setting main content width will only work when you want to limit your document content to a fixed width (like 960 grid). But when you want your content to stretch over the whole browser window width, this solution will work regardless of browser window size.
And a small advice
Avoid using inline styles whenever possible because maintainability of your application/site will become a nightmare.
You can nest 2 div tags inside the container. Float them both and resize them as you need them to be.
Set a bottom margin on the floated element that equals the length of the remainder. Or add a width to the larger element and float it the other direction.
<div id="parent">
<div id="floated" style="width:200px; float:right">Foo bar</div>
<div id="content" style="width:600px; float:left">
<h2>Foo</h2>
<p>Text!</p>
</div>
</div>
OR
<div id="parent">
<div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
<h2>Foo</h2>
<p>Text!</p>
</div>
its easy simply add width in [P] tag see here
example
<div id="parent">
<div id="floated" style="float:right">Foo bar</div>
<h2>Foo</h2>
<p style=" width: 500px; ">Text!</p>
</div>
for example your ( id="parent" ) have 800px width
and (id="floated") right-side bar have 200px width
then make your [P] 800px - 200px = 600px
so set your [P] width to 600px
---------- or
if you want some space between text and bar make [P] width 580px
it means 20px for space

Achieve table cell effect with floated divs

If I try to apply min-width, max-width to a floating div so that it expands to max-width when the right content is hidden does not work.
But, if I use table and 2 tds in it, the left td will expand to 100% if the right td is hidden.
Can I achieve this table effect with floated divs?
I don't think you can do what you are asking, but you can make it look like what you are asking.
Make it into two tds and put a max-width on a div inside the td. Would that work?
This isn't going to work with floats. Luckily we now have more tools at our disposal.
Here are two very simple methods to expand a div to 100% of the available width if a sibling horizontally to it is hidden or removed.
#1 – Using display: flex
Compatibility: Edge and all modern browsers. IE 10 and 11 support the non-standard -ms-flexbox.
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container div is given display: flex.
The containers children are give flex: 1 and they will be assigned equal width, can grow and can shrink.
.container {
width: 500px;
display: flex;
}
.container>div {
flex: 1;
background: #FF6961;
height: 200px;
margin-bottom: 20px;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
Read this guide to flexbox
Read more about flexbox on the MDN
#2 – Using display: table
Compatibility: IE8+ and all modern browsers
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container is given display: table
The containers children are given display: table-cell and will act the same as cells in an HTML table. If a cell is hidden or is removed the other cell will take its space.
.container{
display: table;
width: 600px;
margin: 20px;
}
.container>div {
display: table-cell;
height: 200px;
background: #FF6961;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
<div class="container">
<div>
Content takes up the remaining width if a cell has a fixed width.
</div>
<div style="width: 200px">
Content
</div>
</div>
Read more about CSS tables on the MDN