This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 4 years ago.
I have a flexbox layout with fixed header, fixed footer, fixed menu, and scrolling content.
Thanks to some articles and SO answers, I have managed to make the menu and content vertically-scrolling, as expected.
Now, I just can't find how to do the same to make the content horizontally scroll. The horizontal scrollbar always appears at the body level. I've tried forcing a width on each container but it doesn't work. I expected the overflow: auto on the .layout-content-content div to overflow both horizontally and vertically, but CSS is not to be tamed so easily, apparently.
Corresponding codepen: https://codepen.io/cosmo0/pen/vaZbGL
html,
body,
.layout-container {
height: 100%;
width: 100%;
}
body {
margin: 0;
}
.layout-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.header,
.footer {
height: 50px;
flex: 0 0 auto;
}
.layout-body {
flex: 1 1 auto;
display: flex;
}
.layout-menu {
flex: 0 0 auto;
width: 300px;
overflow: auto;
}
.layout-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.layout-content-title {
flex: 0 0 auto;
height: 50px;
}
.layout-content-content {
flex: 1 1 auto;
overflow: auto;
}
/* this is to simulate some large data table */
.large {
width: 10000px;
border: 1px solid #ccc;
}
<div class="layout-container">
<div class="header">Header</div>
<div class="layout-body">
<div class="layout-menu">
<ul>
<li>Menu contents</li>
</ul>
</div>
<div class="layout-content">
<div class="layout-content-title">Page title</div>
<div class="layout-content-content">
<div class="large">This content is too large</div>
<p>Content content.</p>
</div>
</div>
</div>
<div class="footer">Footer </div>
</div>
Simply put
overflow: auto;
onto .layout-content
Related
Hi I am creating a website and I am trying to align a picture and some text vertically, but I am not being able to do this and the picture is only taking 100% space of the website, this is the code:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
The website is divided into 3 columns and I am putting the content on the middle one.
Shouldn't the display flex align them vertically? Why is it not working? Thank you in advance!
You need to set align-items:center on flex parent in order to vertically center its children. Check this for more details about flex-container, and this for more general info about flexbox
You can add justify-content:center for horizontal alignment.
Since you are using display: flex to the content div, add just the property align-items:center and your text will be centred vertically:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
align-items:center;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
In order to make it work, try to think with me ok? In order to you understand what is happening here:
First of all if you have a parent div its children should be one bellow one another
Your first step is to set the div to have flex: 1, flex check it out this website to learn more.
now set the items to be side by side with display: flex
set the same container with justify-content: center and align-items:center
and if you wish to align the div to the middle of your page, try this: margin: 0 auto
Here is where the magic happens: flex-direction: column, check the documentation flex-direction
This question already has answers here:
My position: sticky element isn't sticky when using flexbox
(8 answers)
Closed 1 year ago.
I have a simple two column layout:
.container {
display: flex;
flex-direction: row;
}
.col {
padding: 30px;
width: 20%;
}
.col.right {
position: sticky;
}
<div class='container'>
<div class='col left'>Lorem<br/>ipsum<br/>dolor<br/>sit<br/>amet,<br/>consectetur<br/>adipiscing<br/>elit,<br/>sed<br/>do<br/>eiusmod<br/>tempor<br/>incididunt<br/>ut<br/>labore<br/>et<br/>dolore<br/>magna<br/>aliqua.<br/>Leo<br/>urna<br/>molestie<br/>at<br/>elementum<br/>eu<br/>facilisis.<br/>Quisque<br/>non<br/>tellus<br/>orci<br/>ac<br/>auctor<br/>augue.<br/>Ac<br/>turpis<br/>egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra<br/>pharetra<br/>massa.<br/>Elit<br/>eget<br/>gravida<br/>cum<br/>sociis<br/>natoque.<br/>Orci<br/>a<br/>scelerisque<br/>purus<br/>semper.<br/>Pellentesque<br/>dignissim<br/>enim<br/>sit<br/>amet.<br/>Eu<br/>tincidunt<br/>tortor<br/>aliquam<br/>nulla<br/>facilisi<br/>cras<br/>fermentum<br/>odio<br/>eu.<br/>Nunc<br/>mattis<br/>enim<br/>ut<br/>tellus.<br/>Convallis<br/>posuere<br/>morbi<br/>leo<br/>urna<br/>molestie.<br/>Egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra.<br/>Aliquet<br/>eget<br/>sit<br/>amet<br/>tellus.
</div>
<div class='col right'>Tincidunt<br/>praesent<br/>semper<br/>feugiat<br/>nibh<br/>sed<br/>pulvinar<br/>proin<br/>gravida.<br/>Phasellus<br/>vestibulum<br/>lorem<br/>sed<br/>risus<br/>ultricies<br/>tristique.<br/>Pellentesque<br/>pulvinar<br/>pellentesque<br/>habitant<br/>morbi<br/>tristique<br/>senectus<br/>et.<br/>Enim<br/>neque<br/>volutpat<br/>ac<br/>tincidunt<br/>vitae<br/>semper<br/>quis<br/>lectus<br/>nulla.<br/>Commodo<br/>viverra<br/>maecenas<br/>accumsan<br/>lacus<br/>vel<br/>facilisis<br/>volutpat<br/>est<br/>velit.
</div>
</div>
I'd like the right column to stick to the top of the viewport when the left column scrolls, but I'd also like the right column to be scrollable. Is this possible with CSS?
Scrolling need some height limit, something like this should work.
.container {
display: flex;
flex-direction: row;
overflow: auto; /* Scroll ability */
height: 500px; /* Need some height constraint */
}
.col {
padding: 30px;
width: 20%;
}
.col.right {
position: sticky;
top: 0; /* Stick limit */
overflow: auto; /* Scroll ability */
}
<div class='container'>
<div class='col left'>Lorem<br/>ipsum<br/>dolor<br/>sit<br/>amet,<br/>consectetur<br/>adipiscing<br/>elit,<br/>sed<br/>do<br/>eiusmod<br/>tempor<br/>incididunt<br/>ut<br/>labore<br/>et<br/>dolore<br/>magna<br/>aliqua.<br/>Leo<br/>urna<br/>molestie<br/>at<br/>elementum<br/>eu<br/>facilisis.<br/>Quisque<br/>non<br/>tellus<br/>orci<br/>ac<br/>auctor<br/>augue.<br/>Ac<br/>turpis<br/>egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra<br/>pharetra<br/>massa.<br/>Elit<br/>eget<br/>gravida<br/>cum<br/>sociis<br/>natoque.<br/>Orci<br/>a<br/>scelerisque<br/>purus<br/>semper.<br/>Pellentesque<br/>dignissim<br/>enim<br/>sit<br/>amet.<br/>Eu<br/>tincidunt<br/>tortor<br/>aliquam<br/>nulla<br/>facilisi<br/>cras<br/>fermentum<br/>odio<br/>eu.<br/>Nunc<br/>mattis<br/>enim<br/>ut<br/>tellus.<br/>Convallis<br/>posuere<br/>morbi<br/>leo<br/>urna<br/>molestie.<br/>Egestas<br/>sed<br/>tempus<br/>urna<br/>et<br/>pharetra.<br/>Aliquet<br/>eget<br/>sit<br/>amet<br/>tellus.
</div>
<div class='col right'>Tincidunt<br/>praesent<br/>semper<br/>feugiat<br/>nibh<br/>sed<br/>pulvinar<br/>proin<br/>gravida.<br/>Phasellus<br/>vestibulum<br/>lorem<br/>sed<br/>risus<br/>ultricies<br/>tristique.<br/>Pellentesque<br/>pulvinar<br/>pellentesque<br/>habitant<br/>morbi<br/>tristique<br/>senectus<br/>et.<br/>Enim<br/>neque<br/>volutpat<br/>ac<br/>tincidunt<br/>vitae<br/>semper<br/>quis<br/>lectus<br/>nulla.<br/>Commodo<br/>viverra<br/>maecenas<br/>accumsan<br/>lacus<br/>vel<br/>facilisis<br/>volutpat<br/>est<br/>velit.
</div>
</div>
image wireframe
I would like to recreate messaging phone app in html and css. So the app must be full frame without any overflow.
The trick is the bottom part (in red) must be resizable according to the child content. So I used flex (with flex-direction: column) to manage my layout.
The problem is : when the content (in yellow) grow up, the core part will compress the red part. My goal is to overflow, with a scrollbar, the content inside the core part and don't change the size of the red div.
index.html
<body>
<div id="header">
</div>
<div id="core">
<div class="conainer" style="">
<div class="row">
<div class="two columns"></div>
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
</div>
<div class="row">
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
<div class="two columns"></div>
</div>
</div>
</div>
<div id="footer">
</div>
index.css
html, body, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
max-height: 100%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
#header {
height: 50px;
background: #2A9D8F;
flex: 0 0 auto;
}
#core {
background-color: #264653;
flex: 1;
display: flex;
align-items: flex-end;
}
#footer {
height: auto;
background-color: red;
min-height: 50px;
flex: 0 0 auto;
}
.conainer {
flex: 0 0 100%;
}
.row {
margin: 5px;
background-color: yellow;
height: 130px;
}
https://codepen.io/jln_brtn/pen/pobVZBv
Best regards and thank you for your help.
I'm not sure if I understand the problem correctly but since your .row elements have a fixed height: 130px, the element should not be able to grow any further. Overflow styling to .row elements can be added like this:
.row {
overflow-y: scroll;
}
If it is just the #core element, then you can do something like this:
#core {
overflow-y: scroll;
}
For this instance I would suggest to use CSS Grid instead of Flexbox, and giving both <header> and <footer> the space they need, while the <main> gets the rest. This means that both <header> and <footer> stay were they are, even if <main> needs more space for its content, meaning <main> will get a scrollbar.
You can achieve the same by using position: fixed and setting a margin to top and bottom, with fixed heights of <header> and <footer>, and sizing <main> with height: calc(100% - HEIGHT_OF_HEADER - HEIGHT_OF_FOOTER). The problem with this is maintenance, as you would always have to check and revalidate the heights when changing something.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
height: 3.125rem;
background: #2A9D8F;
}
main {
padding: 0.3125rem;
display: flex;
flex-flow: column;
gap: 0.3125rem;
background: #264653;
overflow: hidden auto;
}
footer {
height: 3.125rem;
background: red;
}
main > div {
flex-shrink: 0;
height: 8.125rem;
background: yellow;
}
<header></header>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<footer></footer>
This question already has answers here:
Why is a flex item limited to parent size?
(1 answer)
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 4 years ago.
I want to have a panel (a div) center inside a container (a div with flex display).
When the panel is small in height (just change "height: 300px" in my example CSS), it works OK. When the panel is higher ("height: 3000px") than its container, I want to be able to scroll page the whole page (Note I have "overflow-y: auto" on the body).
The issue is the container does not wrap completely the inner div. If you scroll down you can see the red stops and green overflows:
html, body {
height: 100%;
margin: 0;
}
body {
overflow-y: auto;
}
.h100 {
height: 100%;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-item-stretch {
flex: 1 1;
}
.panel {
height: 3000px;
width: 300px;
background-color: green;
}
.justify-content-center {
justify-content: center;
}
.vscroll {
overflow-y: auto;
}
.m-auto {
margin: auto;
}
.container {
background-color: red;
padding:10px;
}
<div class="flex-col h100">
<div>
<span>LOGO</span>
</div>
<div class="container flex-col flex-item-stretch m-auto">
<div>Title</div>
<div class="panel flex-item-stretch m-auto"></div>
</div>
</div>
So I have a problem where I have 2 divs inside of another div with a fixed size. I the second of the two is too large to fit in the fixed height div so I want a scroll bara to appear. But the scrollbar goes outside of the content. How do I fix this?
html:
<div class="main">
<div class="first-child">
<div class="small-content">
Content
</div>
</div>
<div class="second-child">
<div class="large-content">
Content
</div>
</div>
</div>
css:
.main {
height: 250px;
overflow: hidden;
}
.first-child {
background-color: red;
}
.second-child {
max-height: 100%;
background-color: blue;
overflow-y: scroll;
}
.large-content {
padding-top: 300px;
}
.small-content {
padding: 10px;
}
https://codepen.io/RilleJ/pen/JeBVpz
I added an example as well to show what I mean. Basically I want to be able to scroll all the way down in the blue box and see the content without setting a fixed height. (Not that the content above, the red box, can be different sizes)
Use flexbox to divide the space of the container among the children.
Add flex-grow: 0, and flex-shrink: 0 for a child that just needs to take the space it needs for its content.
Add flex-grow: 1, and flex-shrink: 1 on the other children to divide the remaining space equally (each child will take at least the size of its content).
.main {
height: 250px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.first-child {
flex-grow: 0;
flex-shrink: 0;
background-color: red;
}
.second-child {
flex-grow: 1;
flex-shrink: 1;
background-color: blue;
overflow-y: scroll;
}
.large-content {
padding-top: 300px;
}
.small-content {
padding: 10px;
}
<div class="main">
<div class="first-child">
<div class="small-content">
Content
</div>
</div>
<div class="second-child">
<div class="large-content">
Content
</div>
</div>
</div>