To prevent text overflow, I want to make the child (.content2) of a flex container (.container2) scrollable. The flex container (.container2) is, in turn, child of another flex container (.container). Due to the nested flexboxes, the height of .content2 can only be set as a fixed value to enable scroll.
How can I handle this issue and get the .content2 container scrollable while taking the remaining space of its parent?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Static Template</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<h1>
Navbar 1
</h1>
</nav>
<div class="content">
<div class="container2">
<nav class="navbar2">
<h1>
Navbar 2
</h1>
</nav>
<div class="content2">
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
<h1>
This is a static template, there is no bundler or bundling
involved!
</h1>
<!-- .... and so on, till the text overflows -->
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Parent Container */
.container {
border: 1px solid black;
height: 100vh;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}
.navbar {
background-color: wheat;
padding: 10px;
text-align: center;
}
.content {
border: 1px solid black;
padding: 10px;
flex: 1;
}
/* Child Container */
.container2 {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 10px;
}
.navbar2 {
background-color: wheat;
padding: 10px;
text-align: center;
}
.content2 {
flex: 1;
padding: 10px;
border: 1px solid purple;
overflow: scroll;
}
.content2 h1 {
font-size: 18px;
font-weight: normal;
}
Check this sandbox for your convenience:
CodeSandbox Example
It was an one line solution, but took me a while.
.content2 {
flex: 1 1 0;
}
Related
I'm new to css and I need help with one question. Why flex-grow does not expand the block__column_2 div till the end of the screen? It should be the expected behaviour according to the course theory. Please advise what I'm doing wrong?
Code sample can be seen below. index.html + style.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="block">
<div class="block__row">
<div class="block__column block__column_1">
<div class="block__item">1</div>
</div>
<div class="block__column">
<div class="block__item block__column_2">2
<br>Более высокий блок
</div>
</div>
<div class="block__column block__column_3">
<div class="block__item">3</div>
</div>
</div>
</div>
</div>
</body>
</html>
.wrapper{
height: 100%;
overflow: hidden;
min-height: 100%;
padding: 50px;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.block__row{
border: 20px solid #ece89d;
margin: 0px 0px 20px 0px;
display: flex;
flex-direction: column;
height: 1024px;
align-items: stretch;
}
.block__column{
border: 20px solid #5e5373;
}
.block__column_1{}
.block__column_2{
flex-grow: 1;
flex-basis: auto;
}
.block__column_3{}
.block__item{
background-color: #18b5a4;
padding: 50px;
font-size: 50px;
color: #fff;
font-weight: 700;
text-align: center;
}
remove block__column_2 class from div.block__item and add to div.black_column
and add display:flex for block__column
The display: block property on the parent element prevents flex-grow from having an effect.
Try setting the display: block property on the parent to display: flex.
and add width:100%; to the .block__item
<div class="block__column block__column_2">
<div class="block__item">2
<br>Более высокий блок
</div>
</div>
.block__column{
border: 20px solid #5e5373;
display: flex;
}
.block__column_1,
.block__column_3{
flex-grow: 0;
}
.block__column_2{
flex-grow: 1;
}
.block__item{
background-color: #18b5a4;
padding: 50px;
font-size: 50px;
color: #fff;
font-weight: 700;
text-align: center;
width: 100%;
}
How can I make the shrink element "shrink" when the flex container below grows as a result of flex-wrapping. What is happening now is that new space created below the container instead of shrinking the one above. For some reason flex-grow and flex-shrink are not working expectedly whenever wrap happens. I want everything to fit within the viewport so that the user does not need to scroll.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.main-container {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.main-container>* {
text-align: center;
}
.shrink {
background-color: #c0caad;
padding-top: 30%;
height: 80vh;
width: 100vw;
flex-shrink: 0;
}
.grow {
height: 20vh;
width: 30vw;
background-color: #9da9a0;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
}
.grow>* {
border: 5px solid #654c4f;
height: 100%;
background-color: #b26e63;
width: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<div class="shrink">Shrink</div>
<div class="grow">
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
</div>
</div>
</body>
</html>
There are a few concerns in your CSS. See the working snippet below.
1. flex-shrink: 0; prevents it from shrinking.
For flex-children to be flexibly growing and shrinking, you'd probably want flex: 1; or some other shrink/grow values than 0.
2. explicit height of 80vh and 20vh make them of static height.
That is, they will remain of those specific height rather than flexibly changing their relational heights as you indicated in your drawing. You'd want to remove those values.
3. padding-top: 30% pushes the content down, forcing the height
I wonder if you included it just to push the placeholder text down. But in any case, it's one of the factors that stops the shrink from shrinking.
4. width: 50% + border: 5px - border-box > 50% of available space
Again, this might be just a placeholder style. But in any case, unless you set it to box-sizing: border-box; the width will become 50% + 5px and will unexpectedly wrap.
Below are cleaned up suggestion, based on your drawing in the question.
html, body {
padding: 0;
margin: 0;
}
.main-container {
display: flex;
border: 1px solid red;
width: 100vw;
height: 100vh;
flex-direction: column;
}
.main-container>* {
text-align: center;
}
.shrink {
background-color: #c0caad;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex: 3;
}
.grow {
background-color: #9da9a0;
display: flex;
flex-wrap: wrap;
flex: 1;
align-items: flex-start;
}
.grow>* {
box-sizing: border-box;
border: 5px solid #654c4f;
height: 50px;
background-color: #b26e63;
flex-basis: 50%;
}
<div class="main-container">
<div class="shrink">Shrink</div>
<div class="grow">
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
<div class="growItems">Wrap</div>
</div>
</div>
My first time posting and am looking for some help. I am currently taking an assessment and am stumped on the last part. I am making a picture card with an image above and a circle image to the side as well as some text next to the circle image and below this is what it looks like: https://i.gyazo.com/547948a01bd8f045e6a1b90bd79e113a.png
this is how it needs to look:
https://i.gyazo.com/9426e3f060cdd540581f12da474fc8ca.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
#media screen and (min-width: 600px) {
form {
display: grid;
position: relative;
width: 600px;
margin: 0 auto;
}
}
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
Any help would be awesome! Thank you!
Check out the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App Academy HTML/CSS Assessment</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div class="card">
<img src="./images/desert.jpg" alt="desert" class="desert__img">
<div class="container1">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="container2">
<div><h4>Title goes here</h4></div>
<div><p>Secondary text</p></div>
</div>
</div>
<div class="body__text">Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</div>
</div>
</body>
</html>
Here we used 2 containers, one for row and one for column elements. You can achieve this easily and more effectively with HTML tables.
Next here is the css:
#media screen and (max-width: 599px) {
form {
display: inline;
position: relative;
width: 100%;
}
}
/*Style for picture card*/
.card {
/* text-align: center; */
border-radius: 25px;
width: 344px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}
.desert__img {
width: 344px;
height: 194px;
object-fit: cover;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.avatar__img {
display: flex;
border-radius: 50%;
width: 40px;
height: 40px;
justify-self: start;
padding: 10px;
}
.body__text {
padding: 16px;
}
.container1{
height: 40px;
display: flex;
flex-flow: row nowrap;
}
.container2{
display: flex;
flex-flow: column nowrap;
}
/* ************These styles are junk************ */
/* *********Better to use classes n ids********* */
div h4 {
display: flex;
justify-content: center;
align-items: top;
}
div p {
display: flex;
justify-content: center;
}
h4 {
margin: 0;
padding: 0;
}
p {
display: flex;
margin: 0 auto 20px auto;
padding: 0;
justify-self: center;
}
/* ************These styles are junk************ */
Here I added border-radius property to the card to make its corner round. Use border-top-left-radius, border-top-right-radius with image to make its top borders round which gives card a neat look. It is important to give height n width to image, thus I added height property to avatar pic. Lastly, both container classes are set to contain rows and column without wrapping respectively, using flex-flow property. Hope it will help you. Peace.
Add a float property to the .avatar_img class
.avatar_img {
float: left;
}
Wrap title__text and secondary__text inside div,
and then wrap avatar__img and title inside flexbox div.
<div class="card-info">
<img src="./images/person-avatar.jpg" alt="avatar" class="avatar__img">
<div class="card-info-title">
<div class="title__text">
<h4>Title goes here</h4>
</div>
<div class="secondary__text">
<p>Secondary text</p>
</div>
</div>
</div>
.card-info {
display: flex;
align-items: center;
}
.secondary__text > p {
margin-bottom: 0;
}
Here's CodePen link https://codepen.io/azhkuro/pen/WNrXxpd. Hope it helps you
I am new to CSS and have been learning it.
I cannot seem to figure out how to make the 2 elements in the Div to perfectly vertically align with one another. I have been reading lots and lots of articles but I still cannot get my head around what I am doing wrong.
I have attached my code - your help would be great in my journey of learning.
Thank you!
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
To vertically align the contents of the boxes, you need to add align-items: center to their CSS.
Try flex-direction: column; it will make them appear on top of each other.
h1 {
color: green;
}
* {
font-family: 'Roboto', sans-serif;
}
}
.center {}
.container1 {
width: auto;
display: flex;
flex-direction: column;
padding: 10px;
height: auto;
}
.box-1 {
padding: 10px;
margin: 2px;
border: 2px solid;
display: flex;
flex: 33%;
}
.box-2 {
border: 2px solid;
margin: 2px;
display: flex;
order: 1;
flex: 33%;
}
.box-3 {
margin: 2px;
border: 2px solid;
display: flex;
order: 2;
flex: 33%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="container1">
<div class="box-1">
<div class="center">
<h1>I am box number 1</h1>
<img src="https://placekitten.com/g/400/303" alt="Cute pupies">
</div>
</div>
<div class="box-2">
<h1>I am box number 2</h1>
</div>
<div class="box-3">
<h2>I am box number 3</h2>
</div>
</div>
</body>
</html>
For your main div block, here .container1, set display attribute to block. It'll work!
.container1 {
width: auto;
display: block;
flex-direction: column;
padding: 10px;
height: auto; }
I have to build a 3-column Flex Layout here on the codepen
But I need to add a black color top bar like this:
I have added a code, which is commented in the codepen.
I have to write a CSS for this so that the black color top bar appears. Don't know how to do this. May be some wrap property will be used or some reverse property. Please guide me.
body {
margin: 0;
}
header,
footer,
.content {
display: flex;
}
.content {
justify-content: space-between;
height: 75vh;
max-width: 1500px;
margin: auto;
}
.main {
display: flex;
justify-content: space-between;
width: 70.5%;
}
.primary {
width: 27%;
background-color: yellow;
}
.article {
background-color: blue;
width: 71%;
order: 2;
}
.secondary {
background-color: pink;
width: 25%;
order: 1;
}
.footer {
display: flex;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Fundamental Layout</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>This is a Header Location</h1>
</header>
<div class="content">
<main class="main">
<!-- <div class="top">
The Top area
</div> -->
<aside class="secondary">
The secondary Sidebar
</aside>
<article class="article">
</article>
</main>
<aside class="primary">
The Primary Sidebar
</aside>
</div>
<footer class="footer">
The Footer Area
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
revised codepen
body {
margin: 0;
}
header,
footer,
.content {
display: flex;
}
.content {
justify-content: space-between;
height: 75vh;
max-width: 1500px;
margin: auto;
}
.main {
flex: 0 0 70.5%;
display: flex;
flex-wrap: wrap;
}
.top {
flex: 0 0 100%;
background-color: black;
color: white;
}
.secondary {
background-color: pink;
flex: 0 0 25%;
order: 1;
}
.article {
background-color: blue;
flex: 1;
order: 2;
}
.primary {
flex: 0 0 27%;
background-color: yellow;
}
<header>
<h1>This is a Header Location</h1>
</header>
<div class="content">
<main class="main">
<div class="top">The Top area</div>
<aside class="secondary">The secondary Sidebar</aside>
<article class="article"></article>
</main>
<aside class="primary">The Primary Sidebar</aside>
</div>
<footer class="footer">The Footer Area</footer>
Here's how the top bar is positioned:
.top is made 100% wide inside its container, .main, which is 70.5% wide in a larger container.
Because .main has flex-wrap: wrap, that forces the other two flex items, .secondary and .article to the next row.
The siblings are then sized to fit together on the second row.