I want to make a div which is scrollable in x axis and want to render the images with 100% of containers width and scrollable such that a single image will appear in containers view
but I ended up rendering all images in screen view
this is my code
I want all images scrollable but with image width having containers width
Add this to each direct children flex: 0 0 100%;
And this to parent
display: flex;
flex-wrap: nowrap; // this may be the default
overflow: auto;
I got the sollution of my question here when using horizontal scrolling it is not necessary to use flex for aligning content in row we can simply style our scrollable container with
white-space: nowrap
and the each element of container with
display : inline-block
this solved my problem 😀
Related
I have a div in display: flex which contains another div with some text content and a ul. The items are aligned vertically with align-items: center. When i hover an item in the list, the content changes and every text has a different size.
But here it is, everything looks fine when all the container is visible on the page but if I scroll down until the top of the container is out of the viewport then the container starts to expand or reduce. It can be seen when it switches to a content with more or less lines than the previous one.
I made this GIF for a better understanding of the problem : https://gifyu.com/image/STtIP
And I recreated the bug here : https://codepen.io/lorenzofg/pen/JjLxJBj
I could fix the height of the content div but I would like to avoid that and keep a dynamic height to properly center the text.
Does someone know what's going on or can tell me if what i wanna do is possible or not?
replace height: 100%; with min-height:100vh; in the container class.
remove width or replace width: 20%; with width: 50%; in the content class.
I have a container div (modal) that is set to position: fixed (absolute is not an option for my purpose). Inside of this container I have two columns. One of these columns contains tab buttons with below them some content or a form. This content (only the content, not the tabs) should be scrollable but I can't figure out how.
The height of the tabs can change so the solution can't contain a fixed height for the tab bar.
I've tried to make the whole column scrollable first by setting the column to position: relative, min-height: 100% and overflow-y: scroll but this first try didn't even work.
Codepen with basic setup
EDIT
Not a duplicate of How to make child div scrollable when it exceeds parent height?
I'm working inside a fixed container
I'm working with flexible heights
Trying to achieve a css only solution
This issue is occurring because you are not declaring "max-height" to container ".details-column".
Try below CSS :
.content{
max-height: 400px;
overflow-y: auto;
}
Note: You have to set fixed height or fixed max-height of the container otherwise container won't know when it has to scroll data.
Excerpt from W3School:
The overflow property only works for block elements with a specified
height.
but since you've flexible height element doesn't know when to overflow as it will just keep on growing.
you'll most likely have to define a height or max-height or even use JS to calculate height, other suggestion i can make is to play around with white-space property as well as calc() for height.
Edit:
Here is a very good source to help you understand overflows: https://www.brunildo.org/test/Overflowxy2.html
Good Luck.
By applying following css your div will be scrollable.
.content{
height: 80%;
overflow-y: auto;
}
this is because there is not much content to make it scroll.. put some content and try.. check below link
overflow-y: auto
add this to the modal class. thanks
https://codepen.io/Xenio/pen/mvbpJV99
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 6 years ago.
In this example, as soon as the browser window height drops below 400px, the image is no longer centered in the scrollable area.
html {
height: 100%;
}
body {
height: 100%;
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
#content {
height: 400px;
display: flex;
align-items: center;
}
<div id="content">
<img src="http://placehold.it/300x300">
</div>
It works as soon as I unset the height property of the html or of the body or of both.
Still, I want to understand why centering in this specific example fails. Does it have something to do with the nested flexboxes? Or is there something problematic with setting the height of both, html and body, to 100%? Is it a bug or something browser related?
It's similar to margin: 0 auto (in conjunction with position: relative) for horizontal centering: As long as the container is wider than the centered child, the child will be centered. But as soon as the container (or the body/viewport) is narrower than the child, the child will be aligned left and a scrollbar will appear. That way it will always possible to see the whole child element - since it's larger than the container, that only is possible when scrolling is enabled.
In the situation you describe, the same happens with flexbox and vertical centering: If the parent container would be smaller (i.e. less high) than the child, and the child would be centered without a scrollbar, you wouldn't be able to see it's top and bottom part (which can be important for example if it's a form where you have to fill in text fields etc.), and you wouldn't be able to scroll to see those hidden parts. So in this situation (child higher than parent with child vertically centered in flex container), the child will be put at the top of the parent and you will be able to scroll down, which is good to either read/see the whole content or see/fill in the whole form in case of forms.
I need to create a div of fixed height and 100% width. The contents of the div are a series of images (just img tags).
When I resize the window smaller than the overall width of the images, the last image in the list shifts/flows down and to the left, underneath the first image.
How do I keep the images from shifting/flowing to the next line and keep them all on one line so that the user is forced to scroll the div horizontally to see the rest of the images?
Here is a jsfiddle as an example: http://jsfiddle.net/ZnWXj/2/
You'll want to use the white-space CSS property to the div and give it a nowrap value.
Show in this jsFiddle. (Your original, plus I added the overflow-y property.)
CSS used:
div {
height: 120px;
background: #666;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}​
I think you are trying to Float all the images in the left.
In css use Postion Absolute for all images and then Float all the images to the left.
Something like
float:left;
position: absolute;
use these on the img tag
this is off the top of my head has not tried it yet. So sorry if I am wrong.
There is a Div of width say 500px and height 50px.
Inside this Div there are many (say 50) small Div of width 50px and height 50 px.
Now i want a horizontal scroll instead of a vertical one.
How can i force those small divs to overflow horizontally not vertically
Also number of small divs can change.
Assign the following CSS to the outer DIV:
white-space: nowrap;
overflow-x: scroll;
See an example at this fiddle.
Try setting the child div's to display: inline-block, then set the parent to white-space: nowrap.
Hope that helps :)
the main div style define
float : left;
overflow : scroll;