This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 7 years ago.
To vertically and horizontally center a div with flexbox I simply apply these rules to it's parent
display: flex;
align-items: center;
justify-content: center;
So that it will be displayed like so:
However when there's more content in the div then there is height in the viewport, it makes the content overflow the webpage so it isn't visible, and impossible to scroll up- like so: jsfiddle.net/xk1z6wpa/2
I need the div to not overflow the webpage from the top, rather stopped before reaching it thus only overflowing from the bottom- like so:
How can I accomplish this?
I think your only option is to throw a little JS in.
$(".content").css({
'margin-top': Math.max($(".content").height() - $(window).height(), 0)
})
This pushes the content to the top of the page unless it would result in a negative margin, at which point the expression evaluates to 0.
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
Given the following example, https://jsfiddle.net/mzv4nxo8/,
I want to position the image in the top right corner over the div rectangle, like I've shown in the example. This works fine as long as the div container does not overflow.
However, when you start scrolling, the image moves as well since the image is set to position: absolute. I want it to stay "anchored" to its initial position (i.e. before you start scrolling). The text inside the div rectangle needs to stay in the center position.
How do I accomplish that?
position: absolute positions the element according the the closest parent that has the position property different from the default value static.
Add this to your css and it will work
div {
position: relative;
}
I guess you can also use your .content selector
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I am new to flexbox and now I am trying to align items both vertically and horizontally. I started to google and found quite enough answers. All of them are based on the same strategy: to add some css rules to parent block:
display: flex;
align-items: center;
justify-content: center;
But I also want so that parent block was 100% height of window. So I made 100% of html, body and parent block. From the first sight everything works. But then I noticed a problem. When I shrink a browser so that child block does not fit browser window, top part of child centerd block is not visible.
Here is an example. When you open it you see red top border. But if you decrease size of the area for displaying so that the square does not fit that area you do not see a top border. It is lost.
I saw this answer but the problem also exists in the first accepted answer. What should I do to resolve this?
Update
Here is what I get:
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)
How to center a flex container but left-align flex items
(9 answers)
Closed 4 years ago.
My goal is like this:
Rules:
the horizontal gap between items is fixed, called x
the vertical gap between items is fixed, called y
the gap between borders of the leftmost item and the flexbox is the same as that between the rightmost item and the flexbox, called z
x, y, z are set individually. They may be different.
List items from left to right, and then top to bottom
keep the bottom padding >= the top padding. If exceeded, hide the overflow part and make it scrollable (not system scrollbar).
I tried some ways, and this is my current code
content #ItemPane {
height:100%;
background:#a0d4e5;
padding:1vh;
border:1px solid blue;
}
content #ItemPane .PanelContentWrapper {
width:100%;
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
content #ItemPane .Slot {
width:6vh;
height:6vh;
margin:1vh;
background:black;
}
and as a result:
https://jsfiddle.net/h4ww9erj/
The biggest problem is that I can't make the left and right padding the same while the items are listed left-aligned.
My solutions/workarounds:
Dynamically set the gap between items in js
Table for this layout
Any better ideas?
As for scroll and bottom padding issue, the only way I think of is that I must have a middle wrapper as I already I wrote, and customize my own scroll system (e.g. capture the mouse/touch offset and convert it to scroll offset and move the wrapper to the corresponding position).
Any other advises?
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
I am using display: flex to create a responsive card-based dashboard.
Fiddle here.
I noticed that the cards (each individual element div) all shrink or expand vertically to maintain the same size when in a row. So, the height of the biggest (or highest) card is inherited by the rest of the cards in the same row.
Note: When you resize the Fiddle window, you will notice this happens only when more than one card is present in a row. So, when the window is too small to allow only one card horizontally, the size is dependent on the content inside.
I can't seem to figure out which property is doing that so here's my question:
How to get the cards to NOT get resized?
OR
How to retain the responsiveness without using display: flex
If you don't want the cards to be resized, you should had align-items: flex-start on the flex container and remove the min-height: 250px on the cards. Maybe you can set height: auto on the cards
I have a div with horizontal overflow that I can scroll horizontally.
I want that the content of this div is already scrolled all to the right and that you have to scroll to the other direction instead. Is there anything possible to do with CSS? Relative positioning wouldn't be that comfortable because the length of the div's content varies.
Use text-direction:rtl Simple demo