Flexbox issue with wrapping and flex-grow: auto - html

I'm struggling with a puzzle I ran myself into. I want to have tabs, which can be multiline, to fill the entire width optimally. For which flex: auto works great. However for some unrelated and unchangable circumstances I also have the container with flex-wrap: wrap and a single item covering the whole width above the tabs.
With flex: auto and flex-wrap: wrap the flex items no longer try to fit into the width by wrapping their content text — they all have it in one line and wrap if they do not fit in.
I've made a fiddle to illustrate it:
https://jsfiddle.net/d67mgqvm/
<div class="flexbox">
<div class="flexitem full">
This is a desired behavior but it has to use a wrapper to prevent wrapping
</div>
<div class="wrapper">
<div class="flexitem">
Content can be different so I have to use flex: auto so it has more space for longer texts
</div>
<div class="flexitem">
Like I said, it can be short like this one
</div>
</div>
</div>
<div class="flexbox">
<div class="flexitem full">
This doesn't work, even though it can fit in all the content if it wraps text inside items
</div>
<div class="flexitem">
Content can be different so I have to use flex: auto so it has more space for longer texts
</div>
<div class="flexitem">
Like I said, it can be short like this one
</div>
</div>
I've been thinking on if it's even possible to do this without a wrapper for a while now. Looks like flex-basis: min-content should be something like that but it only works in FF...

Well, it looks like flex-basis: min-content is what I am looking for, unfortunately it is not yet implemented anywhere other than Firefox.

Related

Unexpected distortion in flex-box

I have a three even columns using flexbox. In CodePen it looks more clear: https://codepen.io/pixy-dixy/pen/KKVwvoQ
Here is the code:
.rowIdeas {
text-align: center;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.columnIdeas {
flex-basis: 25%;
}
.maxSize {
max-height: 300px;
}
<!-- about ideas section start -->
<div class="rowIdeas">
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/philosophy.svg">
<h2>Item one</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
<div class="idea columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/idea.svg">
<h2>item two</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).
</div>
</div>
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/results.svg">
<h2>item three</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
</div>
<!-- about ideas section ends -->
The code works fine here and in CodePen, but when I put the same code in my landing page, I see this:
As you see the first one goes a bit upper than others.
Any idea what the problem is?
The problem is that the svg images are differnt proportions. So the one on the left is actually shorter, so the title doesn't drop as low as the others. You'll have to either give them a specific height, remake it so they're all the same height, or otherwise account for the varying sizes.

Flexbox items spilling over into header

I am building a personal website, and have been using a lot of flexbox to attain the layout I want. I recently ran into an issue that I cannot seem to solve. Where the items in my flexbox container seem to be spilling out and into other containers, such as my header container or past the bottom of where the page should end.
<div class="main-container">
<div class="header">
<h1>John Doe</h1>
<h2>Test</h2>
</div>
<div class="content-container">
<div class="projects">
<div class="content-container">
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/XYBbgE
I wanted to use a flexbox layout for my projects section so that the content will be centered, and I like how easy it is to do that with flexbox. If you adjust the height of the codepen container by either increasing the height OR reduce it, you can see that the header is hiding some of the elements.
I have included some HTML to kind of show the layout. I have excluded a lot to conserve space, however the codepen link is much closer to what the actual design looks like.
EDIT: I made a gif demonstrating the behavior that I am having an issue with
gif of flexbox problem
As you can see, as I adjust the height, the header of my page appears to cover up some of the items beneath it. I also cannot scroll higher than what the height is, if that makes sense.
To point out your error, it's the alignment of item's, for all elements you have aligned it center vertically. so it seemed out of a container as it's height was more than viewport. You can fix it by align-items: center; to align-items: flex-start;
.projects {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
}
and to let you know, i think you are using too flex for everything which can be achieved without it easily

HTML, CSS, Bootstrap - Two columns with centering

I am trying to make a little website that should have two columns, and each column should have its content centered.
However, I have noticed that the columns will follow the height of each other, and not act as individual columns. E.g. whenever I add content to one of the columns, the content of the other column will be moved to fit the height of that column.
In the JSFiddle, you can see that the "Hello" on the right side is not completely centered; it has been moved up to stand in line with the first of three "Hello"'s on the left side. I would like it so, that whenever I add content to one column, it doesn't affect the other - so the "Hello" on the right side should ideally stay completely centered.
JSFiddle: https://jsfiddle.net/goupb2ch/1/
I have worked on this for quite a while now. Any ideas? Thanks!
Consider using flexbox to solve your problem: in this case far less code is required.
https://jsfiddle.net/upwgk2u4/
.container {
display: flex;
text-align: center;
height: 100%;
}
.container > div {
flex: 1;
align-self: center;
}
Why not use what's already in Bootstrap 4? No extra CSS is needed.
https://www.codeply.com/go/0zwGz83Cbw
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div class="col-md-6 align-self-center text-center">
<p>Hello</p>
</div>
</div>
</div>

flex-shrink: 0 and white-space: wrap

I have a flexbox container with 2 columns. I want the columns to stack when there isn't room to display them both. I use the following html/css
<div class="container">
<div class="column">
<div>Short content</div>
<div>This is some longer content to show problem</div>
<div>Short contetn</div>
</div>
<div class="column">
<div>Short content</div>
<div>This is some longer content to show problem</div>
<div>Short contetn</div>
</div>
</div>
and
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1 0 auto;
/* grow, don't shrink */
}
JS fiddle here: http://jsfiddle.net/AsdNS/
It seems that there is implicitally white-space: nowrap on the inner divs, but I don't want this. If I did want it surely I would specify it in my css. Is there a way to not wrap whitespace and then only wrap the columns if a single block of text with no whitespace is too big?
In practice I want to force it to wrap on some whitespace, but not others (I will use <span>s)
EDIT Here is a more real-world jsfiddle: http://jsfiddle.net/W7g3U/1/
What I want is for the long div to wrap, but the short divs not to.
EDIT 2 Here is what I want to achieve (works in chrome) http://plnkr.co/edit/Ppoe8xJrrbC16Y1vyWCD

4 Column Div Layout

I am trying to create a 4 column <div> layout.
Why are the row containers not drawing a border around the respective row?
Also, is this a good approach, as in is my css written well to be fluid and for dynamic resizing of the browser window?
Any suggestions or help would be most appreciated.
Here is my current attempt.
You need to set the overflow to auto when using float. http://jsfiddle.net/gJJHs/
The problem seems to be that you are floating your columns, and when you float things, they take up effectively zero space.
I think the solution is to cancel the float in you "last" class and add a "dummy column" to each row.
This CSS seems to work:
.col
{
float: left;
width: 25%;
}
.last{
clear: left;
}
.row{
border: 1px solid green;
}
Revised HTML (with dummy last column):
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="last" />
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="last" />
</div>
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
As such, the border will seem like it is not bordering anything :( Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
As others have said, if you add overflow: auto; to your .row class, it'll take care of the problem. Here's another article that explains why to use overflow.
http://www.quirksmode.org/css/clearing.html
I hope this helps.
Hristo
it's the float left. That takes the divs "out of flow" and it's drawing the border around empty space essentially
Yet another option, in addition to the other answers, is to add overflow: hidden; to your .row.
The reason for the behavior you saw is that float takes the div outside of the normal flow. The div then essentially takes up no space in the document.
This makes sense if you think about the ostensible purpose of floating an image in order to wrap text around it. The next p tag (for example) is positioned as if the floated image wasn't there, i.e. overlapping the image. Then, the browser wraps the text within the 'p' tag around the image. (If the floated image was not "removed from the flow", the p tag would naturally appear below the image—not giving the desired effect.)
Here's how I'd write the code.
HTML:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="last">8</div>
</div>
CSS:
.col
{
float: left;
width: 25%;
}
.row{
border: 1px solid green;
overflow: hidden; /* "overflow: auto;" works just as well instead */
width:100%; /* Helps older versions of IE */
}
Add a "float:none;clear:both" to your .row and you'll see the rows appropriately. But for the fluid behavior and design that you are looking for, you'll want to apply some javascript (like jQuery Equal Height: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns/) to be consistent across browsers without a ton of CSS hacking.