I need to add a vertically scrollable div in my project. The div is a list of items with fixed height. I can't figure out why the top area of the div is not visible. Below is some sample code. As you can see, the first element of the list is not entirely visible.
html,
body {
height: 100%;
}
* {
box-sizing: border-box;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
}
.content {
width: 75%;
max-height: 500px;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.post-list {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.03);
width: 95%;
border-radius: 5px;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
}
.post-item {
border: 1px solid black;
width: 100%;
margin: 0.5rem;
}
.test {
height: 8rem;
background-color: rgba(255, 0, 0, 0.1);
width: 100%;
text-align: center;
}
<div class="main-container">
<div class="content">
<h1>Some list</h1>
<div class="post-list">
<div class="post-item"> <div class="test"> 1. some content </div> </div>
<div class="post-item"> <div class="test"> 2. some content </div> </div>
<div class="post-item"> <div class="test"> 3. some content </div> </div>
<div class="post-item"> <div class="test"> 4. some content </div> </div>
</div>
</div>
</div>
https://jsfiddle.net/1dphx94s/8/
Just remove justify-content: center in post-list it places all the content in the center of div and makes huge struggling which is not necessary in our case, you just need to center elements on X-axis, flex and align-items are enough
html,
body {
height: 100%;
}
* {
box-sizing: border-box;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);
}
.content {
width: 75%;
max-height: 500px;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.post-list {
display: flex;
flex-direction: column;
align-items: center;
/*justify-content: center;*/
background-color: rgba(0, 0, 0, 0.03);
width: 95%;
border-radius: 5px;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
}
.post-item {
border: 1px solid black;
width: 100%;
margin: 0.5rem;
}
.test {
height: 8rem;
background-color: rgba(255, 0, 0, 0.1);
width: 100%;
text-align: center;
}
<div class="main-container">
<div class="content">
<h1>Some list</h1>
<div class="post-list">
<div class="post-item"> <div class="test"> 1. some content </div> </div>
<div class="post-item"> <div class="test"> 2. some content </div> </div>
<div class="post-item"> <div class="test"> 3. some content </div> </div>
<div class="post-item"> <div class="test"> 4. some content </div> </div>
</div>
</div>
</div>
Related
I want to make a image (inside a div) to the most left of the bottom div and I don't how to do this.
For example I have this image
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
I'm new to html & css so I will appreciate your help making this image to the most left of his bottom div.
If you know the width of the div, it's easy. You can give the .applicationinfo element align-self: flex-start; and margin-left: 10%; (10% is calculated by this formula: (100% - widthOfDiv) / 2)
body {
background: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationinfo {
align-self: flex-start;
margin-left: 10%;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
remove the flex direction, here's it
display: flex;
justify-items: flex-end;
align-items: flex-end;}
You can do it by positioning applicationinfo since you haven't styled it.
you can add parent position: relative; then child to absolute; then give child top: 0; left: 0;
.container {
display: flex;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
position: relative;
background: #222;
border: 1px solid yellow;
}
.applicationinfo {
width: 80%;
top: 0;
left: 0;
border: 1px solid green;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid blue;
}
.settings {
display: flex;
width: 80%;
height: 80%;
background-color: white;
align-self: center;
}
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
I'm facing this problem where I want to have a header, sidebar and content with flexbox. I can't get to a solution to divide these 3 childs. I've been trying to use flex-grow and flex-direction:row but I'm having a problem.
Image of the website
How I want it to be
<style>
.parent {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: column;
}
.header {
width: 200px;
height: 200px;
background: cornflowerblue;
}
.side {
width: 200px;
height: 200px;
background: rgb(219, 133, 133);
}
.content {
width: 200px;
height: 200px;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
You need to create two containers, one for all your elements and one for your header and content.
<div class="parent"> <!-- Container 1 -->
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="container"> <!-- Container 2 -->
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
Then, you can treat each container as a separate flex-box. the parent will have a flex-direction: row; and the container will have flex-direction: column;.
You also want to set values in percentages, not absolute values as you have right now (200px, 20rem..).
.parent {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
border: 20px solid black;
display: flex;
flex-direction: row;
}
.header {
height: 30%;
background: cornflowerblue;
}
.side {
width: 30%;
height: 100%;
background: rgb(219, 133, 133);
}
.content {
height: 70%;
background: rgb(115, 202, 180);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
width: 70%;
height: 100%;
}
JSFiddle
Images to illustrate the separation:
You have to wrap your header & content section inside another div. Something like this below example. However, The best way to achieve this layout is using a CSS grid. Here is the complete CSS grid guide
.parent {
display: flex;
height: 100vh;
background: #000;
padding: 5px;
margin: 0;
}
.side {
border: 1px solid #000;
width: 30vw;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
margin-right: 5px;
}
.main-body {
border: 1px solid #000;
width: 70vw;
}
.header,
.content {
display: flex;
justify-content: center;
background: #fff;
}
.header {
height: 25vh;
margin-bottom: 5px;
}
.content {
align-items:center;
height: 70vh;
}
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main-body">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I don't think that you deeply understand how flexbox work. You should read more about it. I advice you to read a book called CSS-in Depth. You can download it online from a website called Z-lib. Try to understand the code that I posted for you.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.parent {
height: 100vh;
border: 20px solid black;
display: flex;
background: pink;
}
.main {
display: flex;
backgound-color: green;
flex-direction: column;
flex: 2
}
.header {
background: cornflowerblue;
}
.side {
flex: 1;
background: rgb(219, 133, 133);
}
.content {
background: rgb(115, 202, 180);
flex: 1
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 190px;
color: #fff;
}
</style>
<div class="parent">
<div class="side">
<h2 class="text">Side</h2>
</div>
<div class="main">
<div class="header">
<h2 class="text">Header</h2>
</div>
<div class="content">
<h2 class="text">Content</h2>
</div>
</div>
</div>
I have circular logo here as you can see , I'm trying to have my circle logo and "name" and "family" around it , like : "name" logo "family" and I want to exclude "container" from being flex child because I want to align them left not center here's my codes:
header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
flex-direction: row-reverse;
}
<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>
note: I want flexbox inside my container (it's children) but exclude container itself from being flex element and being centralized.
You don't need to use display: flex on your header, since you can use margin: 0 auto on the name-fam div. Also, not sure why row-reverse was used on nam-fam since the elements are in the order you wanted in the markup.
header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
margin: 0 auto;
justify-content: center;
}
<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>
If you want to keep display: flex on the header
header {
width: auto;
height: 35vh;
background-color: var(--clr-accent);
display: flex;
/* Change to row */
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.logo {
background: url(/src/logo.png);
width: 6rem;
height: 6rem;
background-position: center;
background-repeat: no-repeat;
background-size: 3rem 3rem;
border: 1px solid black;
border-radius: 50%;
}
.name-fam {
display: flex;
}
/* Add this to container to make sure it's 100% width so it will not appear to be centered */
.container {
flex: 0 0 100%;
max-width: 100%;
}
<header>
<div class="name-fam">
<h2>Name</h2>
<div class="logo"></div>
<h2>Family</h2>
</div>
<div class="container">
<div>
<h4>My marital status:</h4>
<div class="marital-status"></div>
</div>
<div>
<h4>my birthday:</h4>
<div class="birthday-date"></div>
</div>
</div>
</header>
I want my .info class fit with the available height and each of the 3 rows taking 33% of that height. here is my code.
div {
display: block;
}
.content {
box-sizing: border-box;
display: flex;
align-items: center;
width: 310px;
position: relative;
border: .09rem solid rgb(36, 41, 46);
border-radius: .3rem;
}
.avatar {
text-align: center;
position: relative;
width: 30%
}
.avatar img {
min-height: 150px;
min-width: 150px;
border: .09rem solid rgb(36, 41, 46);
}
.info {
width: 70%;
margin-right: .1rem;
text-align: right;
}
<body>
<div class="content">
<div class="avatar">
<img src="http://notavaiable.com" alt="not">
</div>
<div class="info">
<div class="row">
<span>name</span>
</div>
<div class="row">
<span>17</span>
<span>20</span>
<span>1</span>
</div>
<div class="row">location</div>
</div>
</div>
</body>
Please Help me. Thanks in advance.
I had to change your css a little. Namely:
Assign align-items: stretch to .content;
Assign min-height: 150px and min-width: 100% to .avatar img;
Assign display: flex and flex-direction: column to .info;
And make a replacement for this selector:
div {
display: block;
}
To this selector:
.info .row {
flex: 1;
}
This rule sets the height of 1/3 to each .row.
.content {
box-sizing: border-box;
display: flex;
align-items: stretch;
width: 310px;
position: relative;
border: .09rem solid rgb(36, 41, 46);
border-radius: .3rem;
}
.avatar {
text-align: center;
position: relative;
width: 30%;
}
.avatar img {
min-height: 150px;
min-width: 100%;
border: .09rem solid rgb(36, 41, 46);
}
.info {
width: 70%;
margin-right: .1rem;
text-align: right;
display: flex;
flex-direction: column;
}
.info .row {
flex: 1;
}
<body>
<div class="content">
<div class="avatar">
<img src="http://notavaiable.com" alt="not">
</div>
<div class="info">
<div class="row">
<span>name</span>
</div>
<div class="row">
<span>17</span>
<span>20</span>
<span>1</span>
</div>
<div class="row">location</div>
</div>
</div>
</body>
here is your code if I understood correctly
.content {
display: flex;
width: 310px;
border: 1px solid rgb(36, 41, 46);
border-radius: 0.3rem;
box-sizing: border-box;
}
.avatar {
width: 30%;
}
.avatar img {
height: 100%;
width: 100%;
border: 1px solid rgb(36, 41, 46);
box-sizing: border-box;
flex-shrink: 0;
}
.info {
width: 70%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
}
.row {
flex: 1
}
<div class="content">
<div class="avatar">
<img src="https://picsum.photos/150/150" alt="not">
</div>
<div class="info">
<div class="row">
<span>name</span>
</div>
<div class="row">
<span>17</span>
<span>20</span>
<span>1</span>
</div>
<div class="row">location</div>
</div>
</div>
I have a list of messages (which is a flex child) in a container with unknown height and want to make them scrollable. But I cannot find a proper combination of flex-grow: 1, min-height: 0 and other flex tricks to make it working - message list is still bigger than its parent.
When I add overflow-y: auto to its parent - it works but this parent besides messages list includes some content which should not scroll.
Here's my example for this case: https://jsfiddle.net/ecbtrn58/2/
<div class="page">
<div class="messages-section">
<div class="header">Your messages</div>
<div class="content">
<img src="https://http.cat/100" width="70" height="50"/>
<div class="messages-list">
<div class="message">Hi.</div>
<div class="message">Hello.</div>
<div class="message">Good morning.</div>
<div class="message">Yo!</div>
</div>
</div>
</div>
</div>
.page {
background-color: #ddd;
width: 300px;
height: 300px;
.messages-section {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
background-color: #ccc;
.header {
background: #bbb;
padding: 5px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
.messages-list {
display: flex;
flex-direction: column;
overflow-y: auto;
/* What to add here to make it scrollable? */
.message {
height: 50px;
margin: 10px;
padding: 10px;
background: #1dc497;
}
}
}
}
}
How can I make messages list to scroll?
You have to set the height of .content to 100% and make it scrollable:
.page {
background-color: #ddd;
width: 300px;
height: 300px;
}
.page .messages-section {
display: flex;
flex-direction: column;
width: 50%;
height: 100%;
background-color: #ccc;
}
.page .messages-section .header {
background: #bbb;
padding: 5px;
}
.page .messages-section .content {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
height: 100%;
overflow-x: scroll;
}
.page .messages-section .content .messages-list {
display: flex;
flex-direction: column;
overflow-y: auto;
/* What to add here to make it scrollable? */
}
.page .messages-section .content .messages-list .message {
height: 50px;
margin: 10px;
padding: 10px;
background: #1dc497;
}
<div class="page">
<div class="messages-section">
<div class="header">Your messages</div>
<div class="content">
<img src="https://http.cat/100" width="70" height="50" />
<div class="messages-list">
<div class="message">Hi.</div>
<div class="message">Hello.</div>
<div class="message">Good morning.</div>
<div class="message">Yo!</div>
</div>
</div>
</div>
</div>