I am using flex and have 2 columns. These items both fill all height available.
Inside item 1 I've added 2 div's ... the second one I need it to fill up all space available and scroll Y if items inside it go overflow.
I cannot get .box to go 100% height of it's parent.
Here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="item">
<div class="title">Title here</div>
<div class="box">
Box Here
</div>
</div>
<div class="item"></div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
flex-direction: column;
min-height: 98vh;
}
.item {
flex: 1;
}
.item:nth-child(1) {
background-color: blue;
}
.item:nth-child(2) {
background-color: red;
}
.title {
font-size: 30px;
color: white;
}
.box {
background-color: grey;
height: 100%; /* not working */
align-self: stretch;
overflow-y: scroll;
}
How can I fix this issue?
Use this css:
.container {
min-height: 98vh;
}
.flex {
/* display: flex; */
/* flex-direction: column; */
height: 98vh;
}
.item {
/* flex: 1; */
height: 50%;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
height: 100%;
overflow-y: auto;
background-color: grey;
}
No need to use flex and complicate the problem
I changed the HTML layout a little bit. You can use flex.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="title">Title here</div>
<div class="flex">
<div class="item item1">
<div class="box">
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
</div>
</div>
<div class="item item2"></div>
</div>
</div>
</body>
</html>
CSS
.container {
min-height: 98vh;
}
.flex {
display: flex;
flex-direction: column;
height: 98vh;
}
.item {
flex: 1;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
background-color: grey;
overflow-y: scroll;
flex: 1;
}
Related
I am working on a simple code editor application and I stumbled upon a visual bug, basically the textarea is a little bit taller than the container.
This is the index.html:
<!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="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
This is the index.css:
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
<!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="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
I have tried everything but cannot find a solution, searched around Stackoverflow but could not find an answer I thought it was caused by the resize, border and outline, but appearently those are not the problem.
Add box-sizing: border-box; to your textarea styles
I'm trying to make a layout design for my webpage, but it's a little complex to build that design responsive.
I have hidden the sidebar using media query but still struggling with flex-order.
in desktop, it looks like this, and I have achieved this design using flexbox
but I'm trying in mobo device it should look like this
How should I add a media query to rearrange items. I'm new to flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 100%;
margin: 0;
}
.conatiner{
display: flex;
}
.sidebar{
max-width: 30%;
width: 100%;
height: 100vh;
background-color: blue;
}
.main{
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper-1{
display: flex;
}
.item-1{
background-color: blanchedalmond;
width: 70%;
height: 200px;
}
.item-2{
background-color: chartreuse;
width: 30%;
height: 200px;
}
.item-3{
background-color: darkcyan;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</body>
</html>
i tweeked a little bit your code and it is probably solve yor problem
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 100%;
margin: 0;
}
.conatiner {
display: flex;
height: 100vh;
}
.sidebar {
max-width: 30%;
width: 100%;
background-color: blue;
}
.main {
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper-1 {
display: flex;
flex-wrap: wrap;
}
.item-1 {
background-color: blanchedalmond;
width: 70%;
height: 200px;
flex: 0 0 50%;
}
.item-2 {
background-color: chartreuse;
width: 30%;
height: 200px;
flex: 0 0 50%;
}
.item-3 {
background-color: darkcyan;
width: 100%;
height: 300px;
flex: 1;
}
#media only screen and (max-width: 480px) {
.sidebar {
display: none;
}
.wrapper-1 {
flex-direction: column;
}
.item-1 {
order: 1;
flex: 0 0 200px;
}
.item-2 {
order: 3;
flex: 0 0 200px;
}
.item-3 {
order: 2;
flex: 0 0 300px;
}
.item-1, .item-2, .item-3 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!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>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Hi everybody! I've been learning flex box but I'm having a problem with this particular example. There's a thin white space between the border and the elements, like a thin margin. I don't know why is it there and how to remove it. Can somebody help me, please?
EDIT: I'm not refering to the space-between propery, I want it, but there is a thin margin going from top to bottom, left and right that shouldn't be there
If you want to remove spacing in between, your child box div should be 1/4 of the width of the parent div, like below code
<!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>Flex Box</title>
<link rel="stylesheet" href="">
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
.container {
width: 90vw;
height: 90vh;
margin: 10px auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 10px solid black;
}
.box {
width: 25%;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
</body>
</html>
Is this what you want?
*{ /*Don't mind this, this is in place of your body style*/
margin:0;
padding:0;
}
.container {
box-sizing:border-box;
width: 100vw;
height: 100vh;
/* margin: 10px auto; This the one causing it to be surrounded by a white border*/
display: flex;
flex-direction: row;
/*justify-content: space-between; TAKE THIS OUT*/
align-items: stretch;
border: 10px solid black;
}
.box {
width: 100px;
font-size: 50px;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
flex-grow:1; /* ADD THIS IN */
}
.box-1 {
background: darkblue;
}
.box-2 {
background: darkcyan;
}
.box-3 {
background: darkgoldenrod;
}
.box-4 {
background: darkmagenta;
}
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
I want to make 3 column layout with flex box. The goal is to make first and last div widths dynamic. But the 2nd div max-width is static.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
height: 100%;
}
body{
margin: 0;
background-color: #ddd;
display: flex;
justify-content: space-between;
}
.left , .center, .right{
height: 100%;
}
.left{
width: auto;
background-color: antiquewhite;
}
.center{
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right{
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
Now I am getting the center max width is constant that I expected. But left & right div's not appear always. I want to make right & left div appear with dynamic width that based on browser window size.
Update - current layout:
Expected layout:
How can I make it work?
Here you go.
Just apply flex:1 to all of the divs but flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.
html,
body {
min-height: 100% !important;
height: 100%;
}
body {
margin: 0;
background-color: #ddd;
display: flex;
}
.left,
.center,
.right {
flex: 1;
height: 100%;
}
.left {
width: auto;
background-color: red
}
.center {
display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1 0 100%;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right {
width: auto;
background-color: blue;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
does this help?
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
.flex-container > .side {
background-color: green;
width: 100%;
}
.flex-container > .center {
background-color: #f1f1f1;
color: green;
max-width: : 100%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="side"></div>
<div class="center">
this will expand as your content grows
</div>
<div class="side"></div>
</div>
</body>
</html>
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; }