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.
Related
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.
This is sort of a two in problem.
I have a body with height: 100vh similar to how my example is in the jsFiddle (except in there I put 20vh.
I have a similar structure as this, where the innerRight container can be quite large compared to the rest of the content, and only that conatiner is to obtain it's own scroll bar. I sort of got this working in my main project, but the outer container (similar to how I displayed outer in the example) still expands past the the parents height container main. Be it 100vh, or 20vh it doesn't matter it doesn't stay within with display:flex.
.main {
height: 20vh;
}
.outer {
display: flex;
overflow: hidden;
}
.innerLeft {
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width: 100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
Can you please check the below code? Hope it will work for you.
You have to set height:100vh; in .main and set width:calc(100% - 50px); to .innerRight.
Remove height from innerleft and innerright element.
Please refer to this link: https://jsfiddle.net/yudizsolutions/9Lsyzg64/1/
body {
margin: 0;
}
.main {
height: 100vh;
}
.outer {
display: flex;
height: calc(100vh - 19px);
overflow: hidden;
}
.innerLeft {
width: 50px;
background-color: green;
}
.innerRight {
overflow: auto;
background-color: red;
width: calc(100% - 50px);
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
You need to set height to outer class.
.main {
height: 20vh;
}
.outer {
display: flex;
height: 200px;
overflow:hidden;
}
.innerLeft {
width: 50px;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: green;
}
.innerRight {
overflow: auto;
height: 500px;
background-color: red;
width:100%;
}
<div class="main">
<div class="header">
some random text
</div>
<div class="outer">
<div class="innerLeft">
</div>
<div class="innerRight">
</div>
</div>
</div>
I'm creating a grid type layout, the contents of which will be centered, like here.
.outer {
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
I've used text-align: center; but there should be a better way to center the contents vertically too. My issue arises trying to do the same where two of these are next to each other with centered content, like this;
.outer {
width: 50%;
float: left;
position: relative;
background: pink;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
float: left;
position: relative;
background: pink;
}
}
.inner {
position: relative;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
It's looking even worse in a snippet for some reason but something like this would be desired;
I can get the column layout or I can center content. I need to be able to do both.
EDIT
.container {
width: 100%;
height: 500px;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col {
width: 50%;
float: left;
position: relative;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
position: relative;
}
}
.inner {
position: relative;
}
.inner-details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="container">
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
</div>
</div>
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 2<h1>
</div>
</div>
</div>
</div>
To center items you can use display: flex on the container div and also use
align-items: center; // vertical
justify-content: center; // horizontal
To achieve the image you attached you don't need so many containers, this can be done simply like in this example:
.container {
width: 100%;
height: 300px;
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.inner-details {
width: 50%;
float: left;
position: relative;
}
}
.inner-details {
background: pink;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 10px;
}
<div class="container">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
<div class="inner-details">
<h1>Middle 2</h1>
</div>
</div>
I hope this is your desire output. Please check the code snippets.
* {
box-sizing: border-box;
}
.outer {
width: 50%;
height: 100px;
float: left;
position: relative;
background: pink;
margin: 10px 0;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
}
}
.inner {
position: relative;
width: 100%;
height: 100%;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
Using the example from the first snippet and wrapping that twice I've managed to get the desired effect, there's still the issue with having to use text-align to align horizontally but this is the closest I can get without using flex or box-sizing: border-box;. If there's a more appropriate way to do this an example would be appreciated.
.wrap {
width: 100%;
display: table;
}
.col {
width: 50%;
float: left;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
}
}
.outer {a
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="wrap">
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>
I'm building a customised horizontal carousel, where in I want to display some items which are vertically scroll-able.
Code I've tried so far:
html
<div class="carousel">
<div class="c-item">Item-1</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<!-- to be displayed vertically -->
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
css
.carousel{
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
.c-item{
display: inline-block;
width: 35%;
background: #000;
height: 100px;
&.margin{
//margin-left: 35%;
}
}
.abs{
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
.a-item{
height: 100px;
border: 1px solid #000;
}
}
}
.other{
background: yellow;
}
Result:
(codepen)
The problem here is: I want the other div to start just below the item-1; meaning that the vertically scrolled div should be overlapping the other div and the carousel height should be fixed at 100px. I tried using position: absolute for the .abs div but then that div doesn't move on scrolling the carousel.
Desired output will look like this:
A flexbox solution
Each item is 33.33% wide and 100px high. The items inside .multiple are also 100px high.
.multiple has position: relative and overflow-y: auto. The items inside have position: absolute.
Hint: Container -> position: relative, items inside -> position: absolute. That's how it works.
top: (100 * n)px for each <div> inside .item.multiple. n is the index of the <div> inside .item.multiple, starting with 0.
The HTML structure has been changed
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
Your desired result mean making the child overlap the parent, and i don't think that's possible. BUT you can "hack" this by wrapping the .carousel with another div (.demo it this general example), so the results will be something like this:
.demo {overflow: visible; height: 100px;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
As you can see from the snippet the scroll-x doesn't show - yet it exist. You can click one of the .carousel item and scroll them right and left.
Since it's not obvious that the .carousel is scrolling, you can add extra buttons to scroll it:
.demo {overflow: visible; height: 100px;z-index: 3;}
.carousel {
color: #FFF;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: initial;
}
.carousel .c-item {
display: inline-block;
width: 35%;
background: #000;
height: 100px;
}
.carousel .abs {
background: #444;
display: inline-block;
vertical-align: top;
width: 35%;
max-height: 180px;
overflow-y: auto;
}
.carousel .abs .a-item {
height: 100px;
border: 1px solid #000;
}
.other {
background: yellow;
height: 200px;
}
<div class="demo">
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft += 20;" style="position: fixed; top: 50%; right: 0;">L</button>
<button onclick="document.querySelectorAll('.carousel')[0].scrollLeft -= 20;" style="position: fixed; top: 50%; left: 0;">R</button>
<div class="carousel">
<div class="c-item">Item-1</div>
<div class="abs">
<div class="a-item">Abs Item-1.1</div>
<div class="a-item">Abs Item-1.2</div>
<div class="a-item">Abs Item-1.3</div>
</div>
<div class="c-item margin">Item-2</div>
<div class="abs">
<div class="a-item">Abs Item-2.1</div>
<div class="a-item">Abs Item-2.2</div>
<div class="a-item">Abs Item-2.3</div>
</div>
</div>
</div>
<div class="other">
Other div
</div>
Hope that helps!
You have to play with position check snippet.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.carousel {
display: flex;
width: 100vw;
overflow-x: auto;
color: white;
}
.carousel>.item {
flex: 1 0 33.33%;
//margin-right: 5px;
}
.carousel>.item:nth-child(odd) {
background: black;
}
.carousel>.item:nth-child(even) {
background: darkgrey;
}
.carousel>.item,
.carousel>.item.multiple>div {
height: 100px;
}
.carousel>.item.multiple {
position: relative;
overflow-y: auto;
height: 200px;
}
.carousel>.item.multiple>div {
position: absolute;
width: 100%;
}
.carousel>.item.multiple>div:nth-child(2) {
top: 100px;
}
.carousel>.item.multiple>div:nth-child(3) {
top: 200px;
}
.other {
position: absolute;
z-index: -1;
top: 100px;
width: 100%;
background: green;
height: 117px;
}
/* And so on ...
.carousel>.item.multiple>div:nth-child(...) {}
*/
<div class="carousel">
<div class="item">
<div>Item-1</div>
</div>
<div class="item multiple">
<div>Item-1.1</div>
<div>Item-1.2</div>
<div>Item-1.3</div>
</div>
<div class="item">
<div>Item-2</div>
</div>
<div class="item multiple">
<div>Item-2.1</div>
<div>Item-2.2</div>
<div>Item-2.3</div>
</div>
</div>
<div class="other">
Other div
</div>
I am trying to make a nested 100% screen layout but I am running into a problem where the nested container does not fill 100% of the space of the parent cell in safari, even tho the cell itself does expand to fill all the available space. If I make the subContainer the actual flex cell as well it works, but I can´t do that for practical reasons. Any ideas?
jsfiddle
HTML:
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>
CSS:
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
}
#left {
background: red;
width: 50;
}
#right {
background: green;
flex: 1;
}
This is a workaround for this problem in Safari.
Since Safari seems to avoid calculation for non-flex nested containers.
Take a look to this answer
#masterContainer {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
}
#header {
background: yellow;
}
#content {
background: grey;
flex: 1;
position: relative;
}
#subContainer {
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
#left {
background: red;
width: 50px;
}
#right {
background: green;
flex: 1;
}
<div id="masterContainer">
<div id="header">
header
</div>
<div id="content">
<div id="subContainer">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</div>
</div>