I have 3 group of checkboxes, first two are given fixed width and the last one should take the remaining space. In the last group if the names are long, horizontal scroll appear for this group.
However, the last group is overflowing the parent div here. how can I fix this?
You just need to add overflow: auto to the parent container .select__content, this way when content is too big to fit in its block formatting context and overflows, the scrollbar appears and the container .select__content container becomes scrollable. Try this out.
.select__content {
margin-top: 2px;
display: flex;
overflow: auto;
}
Here is the updated CodeSandbox demo.
.select_checkbox takes width auto which grows because the span element is very long. It can be resolved by giving .select_checkbox a max-width so it does not go beyond the specified width and the scrollbar may appear. Try adding max-width like this.
.select__checkbox {
border: 2px solid lightgray;
display: flex;
flex-direction: column;
max-width: 260px;
}
Related
Within my project I have a container <div> to which I add a border so it's visible to the user.
I add display: flex; to the container so it can take advantage of flex box. My current code works perfectly. This is because it is currently fully responsive, meaning when I resize the window from the right or left side, the container also moves which is perfect for responsiveness.
Here is my current code:
<div class="flex-container">
<h1>YO!</h1>
</div>
.flex-container {
display: flex;
flex-direction: row;
border: 1px solid #e3e3e3;
justify-content:center;
align-items: center;
margin-left: 40px;
}
However, when I add a width and height to the .flex-container, it doesn't act responsive when I resize the window - the container doesn't move with it.
So this happens when I add this to the container:
width: 350px;
height: 615px;
Does anybody know why this is happening? Is there a certain way to set a width and height of the container that has display: flex; set on it? Thank you.
It's because you're adding a fixed width and height. This is irregardless of wether the element is set to display flex.
You're telling the container that it has a static, fixed width of 350px. 350px is an absolute value, it isn't relative to the size of the screen.
If you're using flex, you can use flex-basis and set a percentage to set the width of the container, and even more advanced: use flex-grow or flex-shrink to responsively shrink or expand the container, depending on the container size.
So instead of
width: 350px;
Do like this
width: 100%;
max-width: 350px;
Here is a link https://jsfiddle.net/mironomadic/5cvgmpth/3/ for it working
Also if you need to stack the columns on top of each other change
flex-direction: row;
To
flex-direction: column;
Typically a regular width parameter isn't very responsive design.
Changing width: 350px to max-width: 350px will likely achieve the result you are looking for (although this size doesn't leave much room for growth, it will shrink in response to changing window size below 350px width).
I have a layout where I have a scrollable list of items in the center, with some stuff above and below it in a column. The list should take up as much empty space as is available to it in the column (I don't want to specify a specific height on it), and should scroll when the empty space in the column is not enough to fit all the items.
Here is a JSFiddle of the situation.
Notice that with just a few items in the scroller, it expands to fill the empty space in the column (as is intended). But then if you add several more items to the scroller, it expands to fit the entirety of its contents instead of staying at its original size, and then scrolling its overflowing contents; even though the it has overflow-y: scroll set!
However, if you then set the scroller to have a height of 0, the problem is fixed and the items scroll as is intended, with the scroller at its original height before the extra items were added.
But WHY!? Can someone please explain to me what's going on here? Also, is there any consequences of this "solution" that I'm not seeing?
<div class="column">
<div class="title">Header</div>
<div class="scroller">
<div class="item">Child</div>
<div class="item">Child</div>
</div>
<div class="title">Footer</div>
</div>
,
.column {
display: flex;
flex-direction: column;
height: 200px;
}
.title {
height: 50px;
flex-shrink: 0;
}
.scroller {
flex-grow: 20;
flex-shrink: 0;
overflow-y: scroll;
}
.item {
height: 20px;
margin-top: 2px;
}
Some quick background for anyone who runs across this later:
Elements that have flex-grow expand to take up x units of the available space minus the other flex content. In your case, .scroller is the only one with flex-grow but the other flex elements have defined heights so their content takes up space.
Elements that have flex-shrink contract as the space decreases. A zero value means they don't contract, a value >=1 allows scaling down.
However flex-shrink ONLY works if the element DOES NOT also have a flex-grow applied to it. Elements with both shrink & grow will only shrink to the size of their content
In your example, overflow doesn't kick in when the element is as big as the content (see above) which it is because you have both grow/shrink applied. Adding an explicit height (height: 0) overrides the computed "content" height allowing the flex-shrink to compress the element smaller than its content. This, in turn, makes the scrollbar work.
I don't know if this will cause any oddities at some point but it's an interesting solution to the problem and does seem to work pretty well.
You need to add a height to your scroller container css:
height: 30px;
Or max-height to allow growth to a limit:
max-height: 30px;
Either way, for the scroll to kick in, the container needs to feel constrained, so maybe:
height: 100%;
Then limit the size of its container.
I was able to get this working by setting flex-shrink on the scroller element to 1. It will cap out at its available space and use the scrollbar.
I'm currently trying to get an element (div) stretching itself over the free space of a parent element while respecting the size of other elements on its level. I found some solutions and tried most of them but I couldn't get it to work. I suspect this is because of the cms I'm working with which - when telling it to make a set of columns the same height - changes the parent display-style to table-cell. So... here is an image of what I'm trying to archive.
As said, the CMS changes the blue container to display: table-cell to stretch it over the whole area and make all columns in a row the same height. Inside of this blue container are the elements I can control. These are up to four div (white/green) inside of a parent div (yellow). The white div are dynamic and not always present and the green one needs to stretch over the whole vertical space no matter which of the white elements are present.
And idea how to accomplish that? I tried a lot of answers about this topic but they didnt work.. I think that's maybe due to the fact that the blue container is a table-cell?
edit: Here is what I got so far.
<div id="box_wrap">
<div class="box_title">
Title
</div>
<div class="box_image">
Image
</div>
<div class="box_content">
Content
</div>
<div class="box_more">
Read More
</div>
</div>
All of this is in a container provided by the CMS itself which has the attibute display: table-cell.
#box_wrap {
display: flex;
flex-direction: column;
}
.box_content {
display: flex;
flex: 2;
}
I think the problem might be that the container provided my the CMS has no defined height. If I give my #box_wrap a fixed height manually then the div in it will work as they should. I also tried height: auto and height: 100% for the #box_wrap and it doesn't work. Again, probably because the parent has no defined height, no? That is the last thing that I need to solve. The #box_wrap needs to stretch over the vertical, currently it only extends as far as it needs to cover the content.
I also noticed that the first image I provided wasn't 100% accurate so I updated it.
I would use this to allow the .box_content to grow (i.e. become higher) and the others not:
.box_title,
.box_image,
.box_image {
flex-grow: 0;
}
.box_content {
flex-grow: 1;
}
In addition, you should apply height: 100% to #box_wrap, but for that you also need height: 100% on body and html to have a reference for the height of #box_wrap. So, to sum up:
html, body {
height: 100%;
margin: 0;
}
#box_wrap {
height: 100%;
}
You also might want to add...
body {
padding: 10px;
box-sizing: border-box;
}
...to get that distance between the edge of the screen and your container as it's shown in your image.
I've been playing with this one for hours, with no success.
I have a top menu with submenus (that contains a popup menu).
In one of my popup menus, i need the container to be maximum 170 pixels width and all of the items to wrap around that width. For some reason they don't wrap up.
I've reproduced the exact menu in a fiddle. Notice the submenu COUNTRY. It contains a popup with flags, but they don't wrap around
https://jsfiddle.net/h81y2t0L/
I've added attributes like a width, a min-width, a white-space with no success
.flagMenu {
max-width: 170px;
/* white-space: normal; */
}
.flagMenu li {
display: inline-block;
}
How do i wrap around the flags in the container?
To wrap the inline-blocks you need to define a container width - but since you don't want an exact width, use width: max-content; That way the width will be equal to the width of the content but the max-width will stop it from growing further.
.flagMenu {
max-width: 170px;
white-space: normal;
width: max-content;
}
Demo
I'm using flexbox to responsively lay out a bunch of images.
.cards
.card.card1
.card.card2
.card.card3
.card.card4
etc....
footer
css:
.cards{
display: flex;
width: 100%;
flex-wrap: wrap;
height: 81.2rem;
}
.card{
display: flex;
flex-wrap: wrap;
height: 100%;
max-height: 28rem;
position: relative;
}
The problem I'm having is...
I have a footer that needs to be below the .cards div, but since .cards has a height, the footer is hovering over the div where I tell the height to be. (The cards themselves extend past the height.)
I have tried setting a taller height, however, then the space between the rows of cards expand (which I don't want). I've also tried not setting a height, but then the cards don't lay out at all, they just disappear or float way down the page.
Is there a way I can clear the .cards div?
Or just in general, get the footer to appear below the cards?
This shows the footer where it currently is, which is incorrect.
This shows the footer where I need it to be:
Instead of height: 100%, which limits the container to a fixed height, use min-height: 100% or remove height altogether.
If your height property is installed properly, you may need to apply the min-height to parent or ancestor elements.
More details: Working with the CSS height property and percentage values
Additional notes from OP:
Add the height to the direct children of the flex-box, this allows the container to determine its height.
On another note, if you put the height on the sub-children (not direct descendants), the container flex-box will not know how to set its own size and will have no height.