This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 7 years ago.
I have two items inside a flex container, I gave the first item a specific height and I want the other's height to fits its actual content.
So the code is pretty simple: jsfiddle
.main {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
/* Safari 6.1+ */
flex-flow: row nowrap;
}
.sub {
border: 1px black solid;
flex-grow: 1;
}
#sub1 {
height: 300px;
margin-right: 50px;
}
<div class="main">
<div class="sub" id="sub1"> </div>
<div class="sub" id="sub2"> </div>
</div>
As you can see the second div stretched as the first ones's height increased, so how to prevent that, how to make the next child with no height specification hold its actual height as its actual content
Because the default value for align-items is stretch. Change that to flex-start if you want them to be top aligned and no stretch.
.main {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}
.sub {
border: 1px black solid;
flex-grow: 1;
}
#sub1 {
height: 300px;
margin-right: 50px;
}
<div class="main">
<div class="sub" id="sub1"> </div>
<div class="sub" id="sub2"> </div>
</div>
Related
I am trying to fill the remaining space of a containing flex box with the green div. I want the top flex row (blue) to only be the height of its contents and then the row below (green) to fill the rest. For some reason it just seems to split the flex rows evenly down the div. I have read a few questions on here already which all say to make sure the containing div has its height set to 100%. I have set the containing div height to 200px as this is my desired height, but I have also tried adding another container within this to 100% to no avail. I've also made sure to set the flex-grow property on the second row to 1. Every time I think I'm beginning to understand flex it throws another curve ball and it's driving me up the wall. Please help! Thank you.
P.S. for some reason the HTML code snippet below refuses to include the first line of my html but it is contained in the following div: <div class="rmCtrlList_item"
.rmCtrlList_item {
width: 80vw;
margin: 3vw 8.5vw;
height: 200px;
background-color: $primary-color;
border-radius: 10px;
padding: 5px;
display: flex;
flex-flow: row;
flex-wrap: wrap;
// ROWS
&_row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#row-1 {
//max-height: 20px;
background-color: blue;
}
#row-2 {
flex-grow: 1;
align-items: center;
justify-content: center;
background-color: green;
}
// COLUMNS
&_col {
text-align: left;
flex-direction: column;
}
#col-1b {
flex-grow: 1;
}
}
<div class="rmCtrlList_item">
<div class="rmCtrlList_item_row" id="row-1">
<div class="rmCtrlList_item_col" id="col-1a">
<i class="icon__panel-2 fas fa-lightbulb"></i>
</div>
<div class="rmCtrlList_item_col" id="col-1b">
<a href="lights.html">
<h1 class="panel__title">Lights</h1>
</a>
</div>
<div class="rmCtrlList_item_col" id="col-1c">
<i class="icon__enlarge fas fa-plus-circle"></i>
</div>
</div>
<div class="rmCtrlList_item_row" id="row-2">
div to fill remaining space
</div>
</div>
how about to use flex-direction and below code what I used? green will fill ramaining space automatically, if you use its height's 100%
.container{
display: flex;
flex-direction: column;
width: 200px;
height: 300px;
border: 1px solid black;
}
.blue{
width: 100%;
height: 90px; /*change only blue's height size, green will be filled automatically*/
background: blue;
}
.green{
width: 100%;
height: 100%;
background: green;
}
<div class="container">
<div class="blue"></div>
<div class="green"></div>
</div>
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 2 years ago.
I would like the second column out of the two, to shrink when needed so that the first column can take more space. How would I go about to do this with flex box? I would like to achieve dynamic width behavior and not enter any specific pixel values.
.container {
border: 1px solid black;
width: 300px;
}
.container .column {
border: 1px solid magenta;
}
/* Second column */
.container .column+column {}
/* Flex grid */
.flex {
display: flex;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
<div class="flex container">
<div class="row">
<div class="column">
Some very long descriptional text and some extra words here and there so to say.
</div>
<div class="column">
123£
</div>
</div>
</div>
A fiddle to fiddle around width:
https://jsfiddle.net/TheJesper/5wexr384/7/
This happens automatically with flex, so here is the minimum css you need to make it work:
.container {
border: 1px solid black;
width: 300px;
}
.flex {
display: flex;
width: 100%;
}
.column {
border: 1px solid magenta;
}
Then change your HTML:
<div class="container">
<div class="flex">
<div class="column">
// ...
</div>
<div class="column">
// ...
</div>
</div>
</div>
I always find this guide very useful:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This question already has answers here:
Flexbox fill available space vertically
(2 answers)
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 4 years ago.
According to the documentation on CSS-tricks, using justify-content: stretch, a flexbox child item should stretch within its container to fill the available space.
I have a flexbox container where I set the main axis to be column direction, then in this container I place two div flexbox items. I want them to fill the available vertical space equally (so I believe flex: 0 1 auto should do it).
Here is the JS fiddle:
body {
height: 100%
}
.container {
height: 300px;
display: flex;
flex-direction: column;
justify-content: stretch;
border: 1px solid grey;
}
.in {
height: 25px;
border: 1px solid black;
flex: 0 1 auto;
}
<div class="container">
<div class="in">Inside</div>
<div class="in">
Inside
</div>
</div>
As pointed out by #Temani Afif:
body {
height: 100%
}
.container {
height: 300px;
display: flex;
flex-direction: column;
justify-content: stretch;
border: 1px solid grey;
}
.in {
height: 25px;
border: 1px solid black;
flex: 1 1 auto;
}
<div class="container">
<div class="in">Inside</div>
<div class="in">
Inside
</div>
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I'm working on a web app that shows a large grid of cards, the height of which is inherently variable.
In the interests of aesthetics, we were using jQuery's .matchHeight() to equalise the height of cards within each row.
The performance of that didn't scale well, so today I've been migrating to a flex-box based solution which is so much faster.
However, I've lost a behaviour - the content of the card header should be truncated with an ellipsis if it won't fit.
Goals:
3 columns
Column widths vary to fill parent
Constant spacing between columns
Heights equalised within a row
How do I arrange for the container size to be respected and the text-overflow: ellipsis; and white-space: nowrap; to be honoured?
(No jQuery tag as we're moving away from that)
My solution in it's current form, which achieves all of my goals apart from the truncation:
https://codepen.io/anon/pen/QvqZYY
#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; /* Bias cards to stack from left edge */
align-items: stretch; /* Within a row, all cards the same height */
border: thin solid gray;
}
.card-wrapper {
width: 33.33%;
display: flex;
background: #e0e0ff;
}
.card {
flex-grow: 1;
margin: 7px;
display: flex;
flex-direction: column;
border: thin solid gray;
background: #e0ffff;
}
.card div {
border: thin solid gray;
}
.card div:nth-child(1) {
white-space: nowrap;
text-overflow: ellipsis;
}
.card div:nth-child(2) {
flex-grow: 2;
}
<div id="container">
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Multiline<br/>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper"><div class="card"><div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div><div>Body</div><div>Footer</div></div></div>
<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div>
<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div>
<div class="card-wrapper"><div class="card"><div>Title</div><div>Body</div><div>Footer</div></div></div>
</div>
An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot be smaller than the size of its content.
Therefore, text-overflow: ellipsis cannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.)
To override this behavior, use min-width: 0 or overflow: hidden. More details.
#container {
display: flex;
flex-wrap: wrap;
border: thin solid gray;
}
.card-wrapper {
width: 33.33%;
display: flex;
background: #e0e0ff;
}
.card {
flex-grow: 1;
margin: 7px;
display: flex;
flex-direction: column;
border: thin solid gray;
background: #e0ffff;
overflow: hidden; /* NEW */
}
.card div {
border: thin solid gray;
}
.card div:nth-child(1) {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; /* NEW */
}
.card div:nth-child(2) {
flex-grow: 2;
}
<div id="container">
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Multiline<br/>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Really long rambling title that pushes beyond the bounds of the container, unless your screen is really, really wide</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div>Title</div>
<div>Body</div>
<div>Footer</div>
</div>
</div>
</div>
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 3 years ago.
A simplified plunkr to show the problem:
https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z?p=preview
If you resize the right viewport until the two containers no longer fit on the same row, right one moves to a new line.
However the parent inline-flex container width does not change, throwing the top "header" element off - the "button" in "header" should be right aligned with the last item in the container below.
The two (or more) items have fixed width but no space between them. Those are the only elements with fixed width or height.
How can I force the flex container width to fit/shrink when items wrap to a new row (without using js, pure HTML/CSS)?
.main-flex {
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-container {
flex-grow: 1;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
}
<div style="margin-top: 100px;" class="main-flex">
<div>
<span>header</span>
<span style="float:right">button</span>
</div>
<div class="flex-container">
<div style="height: 400px; width:250px; border: 1px solid black;"></div>
<div style="height: 400px; width:250px; border: 1px solid black;"></div>
</div>
</div>
In CSS, the parent container doesn't know when its children wrap. Hence, it continues scaling its size oblivious to what's going on inside.
Put another way, the browser renders the container on the initial cascade. It doesn't reflow the document when a child wraps.
That's why the container doesn't shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.
More details here: Make container shrink-to-fit child elements as they wrap
But you don't need the container to shrink for your layout to work. It can be built with a few adjustments to your HTML and CSS.
.main-flex {
display: inline-flex;
flex-wrap: wrap;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container>div {
height: 400px;
width: 250px;
border: 1px solid black;
}
.flex-container:nth-child(2)>span {
align-self: flex-end;
}
<div class="main-flex">
<div class="flex-container">
<span>header</span>
<div></div>
</div>
<div class="flex-container">
<span>button</span>
<div></div>
</div>
</div>
revised demo