Im trying to make a vertical scroll on my .left class.
When i try to instert overflow-y: scroll, nothing happens.
I tried to set max-height on parent container, but its exceeds the div limits
I tried to set also overflow-y: scroll on .left divider.
Here is a reproduction.
Stackblitz:
https://stackblitz.com/edit/web-platform-49iyin?file=index.html
If you want to have a scroller inside that element, you need to have a fixed height for that parent element
.content {
height: 500px;
background: #ddd;
}
.wrapper {
max-width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
.product-list {
display: flex;
margin-top: 24px;
}
.left {
height: 400px; /* Should have a fixed height here */
overflow: auto; /* Should be auto instead of `scroll` */
flex: 0.3;
background: #6200ff70;
}
.product {
display: flex;
height: 60px;
margin: 8px;
}
If you want to have a scroller for the entire area under content. You can set like this
.content {
height: 500px;
overflow: auto;
background: #ddd;
}
Related
I have created a container (red border with line denoting the center) that scrolls horizontally if there is overflow.
The first child (purple block) of this container is always a button.
When you click this button, it adds additional children to the container.
What I am trying to do is figure out a way with pure CSS, so that the first child is always centered when the app is loaded, and the last child element in the container, if there is more than one child, can also be scrolled to the very center of the container.
I am having difficulties figuring this out because I have applied a min-width (i.e. 100px) in addition to a responsive width (i.e. 25vw) to the child elements.
The way I was initially planning on achieving this was by applying a padding-left to the parent container, and then an ::after pseudo element to :not(.first-child).children:last-child, but then I realized the approach is not sufficient if I want it to be completely responsive. However, I know I can manually calculate at which width min-width will be triggered and then use a #media query, but I am hoping there is a better way.
#container {
width: 100%;
height: 100%;
padding-left: ; /* Half the window width minus half the width of the child. */
overflow-x: scroll;
display: flex;
align-items: center;
background: skyblue;
box-sizing: border-box;
border: solid red 2px;
}
#container::-webkit-scrollbar {
display: none;
}
.children {
width: 25vw;
min-width: 100px;
height: 50%;
min-height: 200px;
position: relative;
margin-right: 5%;
display: flex;
justify-content: center;
align-items: center;
background: purple;
}
:not(.first-child).children:last-child::after {
content: '';
width: ; /* Half the window width minus half the width of the child. */
height: 100%;
position: relative; /* relative or absolute */
left: ; /* and offset appropriately. */
transform: ; /* */
}
Does anybody have any ideas of how to do this?
You can apply margin-left to the first child and to deal with the min-width you can use media query. When the screen is less than 400px the 25vw will be less than 100px and you change the value to consider the 100px.
#container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
overflow-x: scroll;
display: flex;
align-items: center;
background:
linear-gradient(red,red) center/1px 100% no-repeat,
skyblue;
box-sizing: border-box;
border: solid red 2px;
}
#container::-webkit-scrollbar {
display: none;
}
.children {
width: 25vw;
min-width: 100px;
height: 40%;
min-height: 100px;
position: relative;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
background: purple;
flex-shrink:0; /* don't forget this to avoid the shrink */
}
.children:first-child {
margin-left: calc(50% - 12.5vw);
}
#media (max-width:400px) {
.children:first-child {
width: 25vw;
min-width: 100px;
margin-left: calc(50% - 50px);
}
}
<div id="container">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
Without media query you can consider a pseudo element where you will have a max-width constraint:
#container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
overflow-x: scroll;
display: flex;
align-items: center;
background:
linear-gradient(red,red) center/1px 100% no-repeat,
skyblue;
box-sizing: border-box;
border: solid red 2px;
}
#container::-webkit-scrollbar {
display: none;
}
.children {
width: 25vw;
min-width: 100px;
height: 40%;
min-height: 100px;
position: relative;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
background: purple;
flex-shrink:0;
}
#container:before {
content:"";
width: calc(50% - 12.5vw);
max-width:calc(50% - 50px);
flex-shrink:0;
}
<div id="container">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
I was able to create a strictly responsive solution using calc, even though I am using vh as the width of the children. CSS is a savior.
#container {
--offset: calc(50vw - ((100vh / 100) * 20);
padding-left: var(--offset);
background: skyblue;
}
.children {
min-width: 40vh; /* vh is used for width to account for the height of window. */
min-height: 60vh;
position: relative;
background: purple;
}
:not(.first-child).children:last-child::after {
content: '';
width: var(--offset);
height: 1px;
position: absolute;
left: 100%;
}
Can't wrap my head around it! I try to make parent div to take no more than 80% height of the window with max-height, and child div to take all parent height minus something.
But height property in percents of the parent doesn't work for the child at all, unless I give parent height property.
Why is that?
Here is my simplified fiddle: https://jsfiddle.net/mbatcer/m2ohnsf5/
Why does inner div not respect parent height and go out of container?
HTML:
<div class="container">
<div class="inner">
<img src="http://via.placeholder.com/70x300">
</div>
</div>
CSS:
.container {
background: blue;
padding: 10px;
max-height: 100px;
}
.inner {
height: 100%;
width: 70px;
overflow: hidden;
}
I think this is what you are looking for:
.container {
background: blue;
padding: 10px;
max-height: 100px;
display: flex;
}
.inner {
width: 70px;
overflow: hidden;
}
Here is the fiddle: https://jsfiddle.net/f9sfczya/1/
Here I added display: flex; in your parent div and removed height: 100%;
from child div.
Unfortunately display: flex; is unsupported by IE9 and older.
Hope this may help you.
If you set child's max-height with a percentage, it will set the child's height according to the parent's real height instead of the max-height.
So you will need to set a height to your .container and set a max-height: 100% to your image since your image has lager height than width.
.container {
background: blue;
padding: 10px;
height: 100px;
}
.inner {
height: 100%;
overflow: hidden;
}
img {
max-height: 100%;
}
A better way to solve this problem is to use flex-box.
.container {
display: flex;
flex-flow: row;
background: blue;
padding: 10px;
max-height: 80vh;
}
.inner {
overflow: hidden;
}
img {
max-height: 100%;
}
Add height:80vh; to .container and it will work.
You should change your CSS like this-
.container {
background: blue;
padding: 10px;
}
.inner {
max-height: 100px;
width: 100% ;
overflow: hidden;
}
.inner img {
max-height: 100px;
}
I have an image inside a div, I am new to html/css, the image is following the proportions of the div it is inside, which is height*width (100%*50%). I realize I can make the image correct by adjusting its height, but that seems a bit forceful. Im using display flex tags. Could it be that?
html,body { height: 100%; margin: 0px; padding: 0px; }
#parent_div {
display: flex;
flex-direction: right;
height: 100%;
}
#child_div {
display: flex;
background-color: #F0A537;
width: 50%;
height: 100%;
}
#child_div2 {
display: flex;
background-color: #468966;
width: 50%;
height: 100%;
}
img {
height: 20%;
width: 20%;
}
You have set your image as height:20%. You need to change the 20% height to auto, that way the image will maintain its own proportions. then you set the width in either pixels or percentage to make it fit in your div.
I'm trying to scroll items within a container without known height. I have div itemsHolder which fills up the rest of wrapper container. wrapper container can have any height but contains header container which has fixed height. So I don't know the height of itemsHolder and I need div items to be scrollable. Here's the code I tried but was unsuccessful.
To sum up. There's wrapper container containing header and itemsHolder. wrapper has variable height, header has fixed height and itemsHolder fills the rest of wrapper (wrapper.height - header.height = itemsHolder.height). I need div items to be scrollable within itemsHolder without using JS.
Thanks.
<div class="wrapper">
<div class="header">
title
</div>
<div class="itemsHolder">
<div class="items">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
CSS:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
overflow: scroll;
}
.item {
width: 100px;
height: 80px;
float: left;
}
http://jsfiddle.net/B2XUL/
Update: I don't know the size of wrapper, it may be different each time and therefore I don't know the height of itemsHolder so I can't set it fixed.
Do the following:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
}
.itemsHolder {
height: 100%;
overflow: auto;
overflow-x:hidden;
background: #ccc;
}
Demo
Set the height of itemsHolder and it will add the scroll if necessary
.itemsHolder {
overflow: scroll;
height: 150px;
}
http://jsfiddle.net/B2XUL/4/
EDIT: I'm very sorry I can't provide an explanation as to why, but adding bottom padding to .wrapper and setting the height of .itemsHolder seems to work. You may have to reduce size of wrapper by 35px when it is set.
Any explanation for this or even a better fix would be welcomed.
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
padding-bottom: 35px;
}
.itemsHolder {
overflow: scroll;
height: 100%;
}
(also .items seems redundant?)
see updated fiddle
Using calc() CSS property, you can achieve wrapper.height - header.height = itemsHolder.height
.itemsHolder {
overflow: auto;
height:calc(100% - 50px);
}
Add overflow auto:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 20%;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
height: 80%;
overflow: auto;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}
Add overflow-x: hidden if you only want vertical scroll.
Updated Fiddle
js fiddle demo
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}
I have a parent with a fixed width
.parent {
width: 800px;
height: 400px;
display: block;
}
I'm trying to center a child inside of it that has a dynamic width, based on the width of an image. I don't want the child div to have any background color (so just be as big as the image)
.child {
background: red;
//how to center?
}
.image-container {
max-height: 253px;
overflow: hidden;
padding: 0;
}
.image-container img {
max-width: 100%;
}
How can I center the div?
JSFiddle
Use text-align: center and remove the position: absolute from child class.
Fiddle
.parent {
width: 800px;
height: 400px;
display: block;
background: blue;
position: absolute;
text-align: center;
}
.child {
margin-left: auto;
margin-right: auto;
}
Set .child to:
.child {
display: block;
margin: 0 auto;
width: 200px;
}
http://jsfiddle.net/YjwCq/4/