This question already has answers here:
What are the differences between flex-basis and width?
(6 answers)
Closed 4 years ago.
I have the following structure, and I'd like to understand why my row does not grow with its inner content.
.row {
border:solid red;
display: flex;
flex-direction: row;
}
.cell {
border: solid green;
flex: 0 0 400px;
}
<div class="row">
<div class="cell">
cell 1
</div>
<div class="cell">
cell 2
</div>
<div class="cell">
cell 3
</div>
</div>
JsFiddle
I don't want the cells to grow or shrink, they should always be 400px width. The parent should grow and overflow the window, and an horizontal scrollbar is expected.
In the above example, the red border should be around the green border. The green border has the expected dimensions, not the red one.
I don't want to set a static width to my row for maintainability reasons related to my usecase.
I'm open for non-flexbox solutions (see inline-block attempt), but would appreciate more a flexbox one (because I need align-items: center behavior on the row)
If you want your container to always match the width of it's children, you'll need to look into display: inline-flex.
display: flex behaves more like a container with a width of 100%
Here's a fiddle that should work:
http://jsfiddle.net/hnrs64fm/
Related
Im using flexboxgrid library to create easy responsive layout, I have a parent div styled like so
display: flex;
flex-wrap: wrap;
gap: 2rem;
children have flexboxgrid styling
col-xs-12 col-md-6 col-lg-4
and it works otherwise well, except when I put that 'gap: 2rem' on parent, then div's start overflowing and push last item to another row.
To illustrate problem:
How can I fix it ?
EDIT: Link to CodePen, with gap there is 2 rows, without gap 1 row.
How to keep gap, stay on 1 row ?
https://codepen.io/ShinigamiZ/pen/YzezgwE
If you want to spread them out over the whole width, don't set a flex-basis for the elements. Rather set flex-grow: 1. This means, that the elements will grow to be as big as possible.
If you want to wrap them to a new line, you need to alter your calculation for flex-basis to also incorporate the gap.
.parent {
display: flex;
flex-wrap: wrap;
gap: 2rem;
background-color: yellow;
}
.sib {
background-color: gray;
flex-grow: 1;
}
<div class='parent'>
<div class='sib'>
123
</div>
<div class='sib'>
123
</div>
<div class='sib'>
123
</div>
</div>
Column classes (col-xs-12 col-md-6 col-lg-4) means it's percentage width and that's where the issue is because the gap is not included in percentage calculation.
My take on this is to allow the columns shrink and grow but only by the amount of gap you define. With your example that would be something like:
.col-md-6 {
flex: 1 0 calc(50% - 2rem);
max-width: 50%;
}
The only issue is a slight inconsistency with columns width if there's a empty space left or if it's the only column and not fullwidth as the elements have their own original percentage width and not one reduced by gap.
https://codepen.io/Erehr/pen/jOxYadW
This question already has answers here:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 1 year ago.
I have a container with unknown width and two children.
I want the first child to determine the width of the container.
I want the second child to wrap inside the container.
How can I do this using e.g. flexbox?
<div class="container">
<div class="first">this determines the container width</div>
<div class="second"> if this is too long, it wraps around</div>
</div>
first you will have to add display: inline-block to your container because div by default have display: block which takes 100% width
next set .container width to max-content so it will take only as many space as it needs to fit whole content and with .first that by default have display: block this element will set width for .container
lastly set max-width: fit-content on your .second element so it will "fit" inside container.
.container {
display: inline-block;
background-color: red;
width: max-content;
}
.second {
max-width: fit-content;
}
<div class="container">
<div class="first">this determines the container width</div>
<div class="second">asd asd if this is too long, it wraps around asd asd</div>
</div>
This question already has answers here:
Equal height rows in CSS Grid Layout
(2 answers)
Closed 1 year ago.
So I have div A and div B.
I need div A to scale to the exact same height as div B
The two divs sit alongside each other and I need the height of Div A to be the same as B
Here is what I have tried: CSS
.container {
display: flex;
flex-direction: column;
// div a and div b
> div {
flex: 1;
}
}
HTML
<div class="container">
<div class="a">text for a</div>
<div class="b">text for b</div>
</div>
There are multiple ways to do this
the height property exists on a div.
Then you can use relative/ absolute heights like
Relative (both inherit from parent)
height: 3rem
Absolute (fixed)
height: 3em
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I'm trying to achieve the flex layout as per the image below. In my code examples, I've not been successful, yet so I can't provide any useful code snippets.
Box 1 would be fixed width and 100% height
Box 2 and 3 would be 50% height and 100% width
Box 4 would be fixed width and 100% height
It would be wrapped in a container DIV (not shown).
Is this correct usage for Flex, or should a grid be used for something like this? I've found an example that manages to get either box 1 or box 4 in position (such as here: Mozilla Flex Example, but not with both.
For layouts with such requirements CSS Grid is a much better choice than Flexbox.
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Here's a working codepen. You can modify the fixed columns width by changing the grid-template-columns definitions.
Yes, you can do this with flexbox - you will need a container div for box 2 and box 3. You can use something like this:
#layout {
display: flex;
resize: both;
overflow: scroll;
}
#box1, #box4 {
width: 100px;
}
#box2-3 {
flex-grow: 1;
display: flex;
flex-direction: column;
}
#box2, #box3 {
flex-grow: 1;
}
#box1, #box2, #box3, #box4 {
border: 1px solid red;
}
<div id="layout">
<div id="box1">Box 1</div>
<div id="box2-3">
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
<div id="box4">Box 4</div>
</div>
I need to layout 2 divs (http://jsfiddle.net/tWE8W/) positioned in a container with a fixed width and height:
<div class="container">
<div class="left">
<div class="element"></div>
</div>
<div class="right">
<div class="element"></div>
</div>
</div>
both divs contain divs of type element with fixed dimensions. the elements can be added and removed dynamically.
div1 is positioned left. The elements should be stacked 2 high and grow to the right.
div2 is positioned right.The elements should be positioned horizontally (float: left). When the elements reach the right corner of div2 (also the rght corner of the container). The should start a new line.
div1 should have a dynamic width based on th enumber of elements it contains.
it only needs to work on the latest version of Google Chrome.
Use the Flexible Box Layout for the boxes on the left like
A C E
B D
FIDDLE
(Relevant) CSS
.left{
float:left;
display:flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
}
Browser support is also quite good nowadays
EDIT:
You can fiddle with the align-content property to align the boxes on the left.
Setting align-content: space-between; spaces the boxes out like this:
FIDDLE
I hope i understood right http://jsfiddle.net/nindos/8DTp2/9/
<style>
.container
{
height: 50px;
width: 300px;
overflow: hidden;
border: 1px solid black;
}
.left,.right{float:left;width:50%;height:100%;overflow:auto}
.left{background-color:red}
.right{background-color:blue}
.element{display:inline-block;background-color:pink}</style>