I have 2 divs side-by-side in a flexbox. The right hand one should always be the same width, and I want the left hand one to just grab the remaining space. But it won't unless I specifically set its width.
So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.
I guess I could leave it as it is but it feels wrong - like there has to be a way to say:
the right one is always the same; you on the left - you get everything that's left
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}
<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
</strong>
</div>
<div style="width:100%; display:flex; justify-content:space-between;">
<div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
A really really really really really really really really really really really long department name
</div>
<div style="color:#555555; text-align:right; white-space:nowrap;">
Created: 21 September 2016
</div>
</div>
</div>
<div style="margin-left:8px;">
<strong>></strong>
</div>
</div>
Use the flex-grow property to make a flex item consume free space on the main axis.
This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.
A common example is flex-grow: 1 or, using the shorthand property, flex: 1.
Hence, instead of width: 96% on your div, use flex: 1.
You wrote:
So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.
The squashing of the fixed-width div is related to another flex property: flex-shrink
By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.
To disable this feature use flex-shrink: 0.
For more details see The flex-shrink factor section in the answer here:
What are the differences between flex-basis and width?
Learn more about flex alignment along the main axis here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Learn more about flex alignment along the cross axis here:
How does flex-wrap work with align-self, align-items and align-content?
Basically I was trying to get my code to have a middle section on a 'row' to auto-adjust to the content on both sides (in my case, a dotted line separator). Like #Michael_B suggested, the key is using display:flex on the row container and at least making sure your middle container on the row has a flex-grow value of at least 1 higher than the outer containers (if outer containers don't have any flex-grow properties applied, middle container only needs 1 for flex-grow).
Here's a pic of what I was trying to do and sample code for how I solved it.
.row {
background: lightgray;
height: 30px;
width: 100%;
display: flex;
align-items:flex-end;
margin-top:5px;
}
.left {
background:lightblue;
}
.separator{
flex-grow:1;
border-bottom:dotted 2px black;
}
.right {
background:coral;
}
<div class="row">
<div class="left">Left</div>
<div class="separator"></div>
<div class="right">Right With Text</div>
</div>
<div class="row">
<div class="left">Left With More Text</div>
<div class="separator"></div>
<div class="right">Right</div>
</div>
<div class="row">
<div class="left">Left With Text</div>
<div class="separator"></div>
<div class="right">Right With More Text</div>
</div>
Related
I want to make use of the new Flexbox Gap property, like gap: 1rem.
This is a simple column layout with blocks that have percentage based sizes. I use flex-basis to set the size. I want those blocks to be able to "float" over multiple lines. That's why there is flex-wrap: wrap on the parent.
<div class="flex gap">
<div class="span-half">
<div class="box">
span-half
</div>
</div>
<div class="span-half">
<div class="box">
span-half
</div>
</div>
<div class="span-quarter">
<div class="box">
span-quarter
</div>
</div>
<div class="span-quarter">
<div class="box">
span-quarter
</div>
</div>
<div class="span-half">
<div class="box">
span-half
</div>
</div>
</div>
.box {
background: #ddd;
padding: .5rem;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.gap {
gap: 1rem;
}
.span-half {
flex-basis: 50%;
}
.span-quarter {
flex-basis: 25%;
}
Expected are two lines: The first line is made of the two half (50%) containers. The second line consists of two quarter (25%) containers and a third half (50%) container.
This works when no gap is added. But once the gap property comes in the containers seem to take the availabe space, but the actual gap size is added on top of that.
It also seems to work for one line, when flex-wrap is not enabled, but maybe it is just forcing it into layout that way.
I can imagine that it requires a CSS calc function to substract the space taken by the gap from the total percentage per row but I wonder if and how this can be done. The number of child items is not fixed and it can be any kind of combination of quarter, half, third and fifth elements.
For reference: I am looking to refactor the current Flexbox Grid System of my Teutonic CSS design system based on paddings and margins: https://teutonic.co/examples/flexbox#spans I am also aware of other alternative solutions using CSS grid or floats instead.
I hope the question is clear enough?
Demo: https://codepen.io/esher/pen/zYZojaK
I have a parent container that has a (priori unknown) number of children that have a minimum width. When I resize the browser past the point of children shrinking, the parent background shrinks with the window, and does not cover children.
.row{
display:flex;
background-color:#fcc;
background-size:cover;
}
.row:nth-child(odd){
background-color:#fbb;
}
.child{
min-width:150px;
border:1px #ccc solid;
flex-grow:1;
}
<div class="row">
<div class="child"> content </div>
<div class="child"> content </div>
<div class="child"> content </div>
</div>
<!--more rows follow-->
jsfiddle
How would I go about ensuring the parent background covers all the children?
I tried putting width:100%, background-size:cover on the .row element. Also tried wrapping everything in a container and setting overflow:auto on that.
The only way I can sort of get it work is if i put overflow:auto on the .row element, but then it makes each row horizontally-scrollable independent of others.
I already saw this post, but it's not exactly what I need - I'm not wrapping any flex-items, the point is for them to stay the way they are.
I also read this article, but I can't see anything that can help with my problem.
You probably want display: inline-flex;
Check: https://jsfiddle.net/n5s3n3g8/1/
Can this be done in LESS?
I have a main container whose width I don't know. The width can vary, too, depending on the browser window width, etc.
Inside that container, I want to have 4 (or n) equally wide sub-containers (spans or divs).
Not knowing the actual width of the main container, is there any way to do some kind of calculation in LESS, that would simply refer to the main container's width as "the width" (for lack of better words), and then let me divide "the width" into 4?
PS: Feel free to correct or edit my question if I have used any confusing or incorrect nomenclature.
I think you are overthinking it, you can do this with standard CSS by using percentages.
HTML
<div class="container">
<div class="quarter">Content 1</div>
<div class="quarter">Content 2</div>
<div class="quarter">Content 3</div>
<div class="quarter">Content 4</div>
</div>
LESS/CSS
div.container {
width: 100%;
div.quarter {
width: 25%;
float: left;
}
}
Instead of float: left you can try display: inline-block if you want to play a bit.
JSFiddle example
<div class="internal-wrapper row-fluid">
<div class="Header span12">
<div class="HeaderTitle span6"></div>
<div class="span6"></div>
</div>
</div>
Now, when I do padding on internal-wrapper, I am expecting the padding to effect on the entire grid! inside it. But an overflow is occurring (I think, the right padding is not working)
.internal-wrapper {
padding-left: 30px;
padding-right: 30px;
}
The blue bar below represents Header class. The green box, represents padding! So, Its happening on left but not right
.row-fluid is 100% width. Because it's using a border-box layout, any padding you put is added to that 100%. See http://paulirish.com/2012/box-sizing-border-box-ftw/. However, setting it to use the content-box model will probably cause other problems in Bootstrap.
How to fix it - add an inner element with the padding.
<div class="row-fluid">
<div style="padding-left: 30px; padding-right: 30px;">
...
</div>
</div>
I can't see (or discern) from your post what's wrong, but here's my guess: By placing padding on an element that Bootstrap sizes, you've altered its width. Try putting margin on .Header instead.
If this doesn't help, please create a demo: http://jsfiddle.net/
I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.