I have a container with the left side and right side. i have an image on the right side and it is overflowing hence the experience is bad.
I tried putting overflow: hidden but it is still going outside the box. I want the Right side to have a max-width of 50vw and anything that goes past it should be hidden.
What am I doing wrong?
.halfcontainer {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
margin: 20px;
}
.righthalf{
overflow: hidden;
max-width:50vw;
}
.hero__image {
display: block;
position: absolute;
width: 70%;
top:10%;
right: -30%;
overflow: hidden;
}
<section >
<div class="halfcontainer">
<div class="lefthalf">
<h1>Hello world</h1>
</div>
<div class="righthalf">
<img class="hero__image" src="images/hero.webp" />
</div>
</div>
</section>
Just add Overflow hidden to parent div .halfcontainer
.halfcontainer {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
margin: 20px;
position:relative;
overflow-x:hidden;
}
.righthalf{
overflow: hidden;
max-width:50vw;
}
.hero__image {
display: block;
position: absolute;
width: 70%;
top:10%;
right: -30%;
overflow: hidden;
}
<section >
<div class="halfcontainer">
<div class="lefthalf">
<h1>Hello world</h1>
</div>
<div class="righthalf">
<img class="hero__image" src="
https://picsum.photos/seed/picsum/200/300" />
</div>
</div>
</section>
Related
I'm trying to make messages shows from bottom to top, like on whatsapp, you will see the latest messages and it will start from bottom and for older messages you need to scroll up.
I'm using display: flex; and justify-content: flex-end; which seems to display correctly (from bottom).
But the problem is that I can't scroll to top, it does not let me.
How can I fix this?
body {
background-color: #000;
height: 100%;
width: 100%;
}
.box {
width: 800px;
height: 200px;
background-color: lightblue;
}
.container {
width: 100%;
height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.header {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
background: red;
}
.message {
margin: 10px;
}
.message.player {
background-color: #ccc
}
.message.me {
background-color: lightgreen;
}
<body>
<div class="box">
<div class="container">
<div class="header">
<span>Yesterday</span>
</div>
<div class="message player">
<span>Message from friend 1</span>
</div>
<div class="message player">
<span>Message from friend 2</span>
</div>
<div class="message player">
<span>Message from friend 3</span>
</div>
<div class="header">
<span>Today</span>
</div>
<div class="message me">
<span>Message from me 1</span>
</div>
<div class="message me">
<span>Message from me 2</span>
</div>
<div class="message me">
<span>Message from me 3</span>
</div>
</div>
</div>
</body>
There is a hack how to do it with CSS with flex-direction: column-reverse for a wrapper, which I attached as an example. But it probably would be better to make it explicitly with JavaScript using Window.scroll() method.
.test {
width: 30px;
height: 30px;
}
.test:nth-of-type(2n + 1) {
background: yellow;
}
.wrapper {
height: 300px;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
<div class="wrapper">
<div class="div">
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<div class="test">6</div>
<div class="test">7</div>
<div class="test">8</div>
<div class="test">9</div>
<div class="test">10</div>
<div class="test">11</div>
<div class="test">12</div>
<div class="test">13</div>
<div class="test">14</div>
<div class="test">15</div>
<div class="test">16</div>
<div class="test">17</div>
<div class="test">18</div>
<div class="test">19</div>
<div class="test">20</div>
</div>
</div>
It is because you are forcing your .container div to be of fixed height (i.e 100% of its parent). Remove the height: 100%; and overflow-y: auto; from .container and set overflow-y: auto; on your .box div.
body {
background-color: #000;
height: 100%;
width: 100%;
}
.box {
width: 800px;
height: 200px;
background-color: lightblue;
overflow-y: auto;
}
.container {
width: 100%;
/* height: 100%;
overflow-y: auto; */
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.header {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
background: red;
}
.message {
margin: 10px;
}
.message.player {
background-color: #ccc
}
.message.me {
background-color: lightgreen;
}
To keep things neat and short:
https://jsfiddle.net/m53ockLu/
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-x: scroll;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally? I'm totally out of ideas, I thought that overflow-x & overflow-y should do the trick, but no dice.
Thank you very much for any help.
Is it possible to keep the red container scrollable on vertical axis, and at the same time make the purple (.second-absolute) element overflow this red container horizontally?
No.
I tried Ethan's suggestion and couldn't get the purple box to visibly overflow the scrollbar:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: 150px;
overflow-y: scroll;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
width: 20px;
background: green;
}
.first {
position: relative;
display: block;
height: 20px;
width: 100px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
position: absolute;
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
I don't think the browser will let you overflow the scrollbar, I even put z-index, explicitly said to visibly overflow, played around with the position property etc.
Consider this example of letting the content dictate the size:
.container {
max-height: 500px;
background: grey;
}
.sidebar {
height: 100vh;
width: max-content;
overflow-y: auto;
background: red;
}
.element {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin: 5px;
height: 200px;
background: green;
}
.first {
display: block;
height: 20px;
background: pink;
}
.second {
display: inline-block;
}
.second-absolute {
height: 20px;
width: 250px;
background: purple;
}
<div class="container">
<div class="sidebar">
<div class="element">
<div class="first"></div>
<div class="second">
<div class="second-absolute"></div>
</div>
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
You made the parent div sidebar have overflow-x: scroll;, overflow-y: auto;. Instead, make each child have its own overflow properties instead of the parent.
With my current code i have couple of problems.
The NavBar last item Menu Bottom is lower underneath the browser window, this is because of the headers height.
When scrolling and reaching the bottom, it still allows to scroll more because of that header then header bar disappears.
I'm sure I'm doing a poor job describing all this, but in nutshell:
The header needs to be always on top no matter of scroll position and it should not mess up other elements.
The contents from NavBar and Content page need to have their in-depended scrolling.
I'm sure I've tried a lot, using position fixed/sticky but i still cant get this right to work.
.main {
display: flex;
flex-direction: column;
}
header {
overflow: none;
position: sticky;
background-color: #af6363;
height: 70px;
width: 100%;
z-index: 30;
}
.container-content {
display: flex;
flex-direction: row;
}
.menu {
background-color: #6fc06c;
display: flex;
flex-direction: column;
height: 100vh;
min-width: 300px;
overflow: scroll;
position: sticky;
z-index: 10;
/* justify-content: space-between; */
}
.menu-item {
padding: 50px;
background-color: #5e9b79;
}
.menu-item_top {
flex-grow: 1;
}
.content {
/* position: relative; */
/* width: 100vmin; */
height: 100vh;
/* min-height: 100vh; */
overflow: scroll;
background-color: #9b5959;
}
.content-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 100px;
width: 100%;
}
.content-item {
width: 200px;
height: 200px;
padding: 50px;
background-color: #7c9cb6;
}
<div class="main">
<header>Header</header>
<div class="container">
<div class="container-content">
<div class="menu">
<div class="menu-item_top">
<div class="menu-item">Menu</div>
<div class="menu-item">Menu</div>
<div class="menu-item">Menu</div>
</div>
<div class="menu-item_bottom">
<div class="menu-item">Menu Bottom</div>
</div>
</div>
<div class="content">
<div class="content-container">
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
</div>
</div>
</div>
</div>
</div>
You were using viewport units which is a good practice but not everywhere if you're trying to achieve what you wanted, I left some comments on the css that was modified. Hope it's what you're looking for.
/*Fills height of the screen*/
body, .main {
max-height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
max-height: 100%;
overflow: hidden
}
.main {
display: flex;
flex-direction: column;
}
/*Fills height of container*/
.container-content {
display: flex;
flex-direction: row;
max-height: 100%;
}
header {
position: sticky;
background-color: #af6363;
height: 70px;
width: 100%;
z-index: 30;
}
.menu {
background-color: #6fc06c;
display: flex;
flex-direction: column;
/*Would fill height of the screen not the container*/
/*height: 100vh;*/
min-width: 300px;
overflow: auto;
position: sticky;
z-index: 10;
}
.menu-item {
padding: 50px;
background-color: #5e9b79;
}
.menu-item_top {
flex-grow: 1;
}
.content {
/*Would fill height of the screen not the container*/
/*height: 100vh;*/
overflow: auto;
background-color: #9b5959;
}
.content-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 100px;
width: 100%;
}
.content-item {
width: 200px;
height: 200px;
padding: 50px;
background-color: #7c9cb6;
}
<div class="main">
<header>Header</header>
<div class="container">
<div class="container-content">
<div class="menu">
<div class="menu-item_top">
<div class="menu-item">Menu</div>
<div class="menu-item">Menu</div>
<div class="menu-item">Menu</div>
</div>
<div class="menu-item_bottom">
<div class="menu-item">Menu Bottom</div>
</div>
</div>
<div class="content">
<div class="content-container">
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
<div class="content-item">Content</div>
</div>
</div>
</div>
</div>
</div>
I have tried using overflow: hidden; for each element but it does not seem to be doing anything
The html looks like this, the display is to have the 2 divs side by side (stacks ontop for smaller screens). The left side div will also be on top of the right side div. I have a screen shot and fiddle too.
.sec {
background-color: red;
min-height: 100vh;
overflow: hidden;
}
.sec2 {
background-color: blue;
min-height: 100vh;
overflow: hidden;
}
.img1 {
max-width: 100%;
position: absolute;
}
.img1 {
z-index: 1;
}
.leftCol {
z-index: 10;
width: 50%;
}
.info-row {
display: flex;
flex-direction: row;
margin-left: 10vw;
margin-right: 200px;
}
.rightCol {
width: 50%;
}
<section class="sec">
<div class="info-row">
<div class="leftCol info-column">
<h1>haheaheh</h1>
<p>teataetetat</p>
</div>
<div class='rightCol info-column'>
<img class="img1" src='https://kasonbloom.files.wordpress.com/2017/08/lamb-2.jpg' />
</div>
</div>
</section>
<section class="sec2">
<div class="info-row">
<div class="leftCol info-column">
<h1>asdfasdfasdf</h1>
<p>basfbasdfbasdfba</p>
</div>
<div class='rightCol info-column'>
</div>
</div>
</section>
https://jsfiddle.net/gtrnrd9r/2/ keep result view at a point where the image breaks through the section
Add position:relative; to your outer section .sec and it will work fine.
.sec {
background-color: red;
min-height: 100vh;
overflow: hidden;
position:relative;
}
.sec2 {
background-color: blue;
min-height: 100vh;
overflow: hidden;
}
.img1 {
max-width: 100%;
position: absolute;
}
.img1 {
z-index: 1;
}
.leftCol {
z-index: 10;
width: 50%;
}
.info-row {
display: flex;
flex-direction: row;
margin-left: 10vw;
margin-right: 200px;
}
.rightCol {
width: 50%;
}
<section class="sec">
<div class="info-row">
<div class="leftCol info-column">
<h1>haheaheh</h1>
<p>teataetetat</p>
</div>
<div class='rightCol info-column'>
<img class="img1" src='https://kasonbloom.files.wordpress.com/2017/08/lamb-2.jpg' />
</div>
</div>
</section>
<section class="sec2">
<div class="info-row">
<div class="leftCol info-column">
<h1>asdfasdfasdf</h1>
<p>basfbasdfbasdfba</p>
</div>
<div class='rightCol info-column'>
</div>
</div>
</section>
.rightCol needs his own width and height if i'm not mistaken. overflow doesn't work with the parent element.
My page doesn't scroll at all, if I change the window size, the content is just invisible if the page is too small. I've tried adding overflow: auto; and overflow: scroll: to many different tags, but this didn't work either.
Here's a snippet of the code, but see this fiddle for the full code
div.wrapper {
position: fixed;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
min-height: 100%;
}
header, ul {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
div.contentwrapper {
text-align: center;
margin: 0 auto;
overflow: auto;
height: 100%;
}
div.left, div.right, div.mid {
display: inline-block;
vertical-align: top;
overflow: auto;
}
footer {
position: relative;
bottom: 0;
width: 100%;
}
<div class="wrapper">
<header>
<img>
<ul>my nav bar</ul>
</header>
<div class="contentwrapper">
<div class="left">
<div class="upperleft"></div>
<div class="lowerleft"></div>
</div>
<div class="mid"></div>
<div class="right"></div>
<footer></footer>
</div>
</div>
Remove position: fixed; from div.wrapper (and anything else you want to get scrolling).
Perhaps you meant position: absolute;
JSFiddle.
div.wrapper {
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
min-height: 100%;
}
header, ul {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
div.contentwrapper {
text-align: center;
margin: 0 auto;
overflow: auto;
height: 100%;
}
div.left, div.right, div.mid {
display: inline-block;
vertical-align: top;
overflow: auto;
}
footer {
position: relative;
bottom: 0;
width: 100%;
}
<div class="wrapper">
<header>
<img>
<ul>my nav bar</ul>
</header>
<div class="contentwrapper">
<div class="left">
<div class="upperleft"></div>
<div class="lowerleft"></div>
</div>
<div class="mid"></div>
<div class="right"></div>
<footer></footer>
</div>
</div>
you have the wrapper set to position : fixed , you gotta change it. That will fix your problem.
div.wrapper {
position: relative;
}