I've tried to achieve this layout with CSS, however, the sidebars (in red) expand whenever there is content in them. I would like if the sidebars maintained a constant width regardless of the content inside of them.
.wrapper {
display: flex;
}
.container {
flex-grow: 1;
max-width: 1024px;
width: 100%;
}
.sidebar {
flex-grow: 1;
min-width: fit-content;
}
You can also use flex-basis CSS property to set the width of each section as the code below:
.wrapper {
display: flex;
}
.container {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 70%;
border: 1px solid #000;
}
.sidebar {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 15%;
border: 1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css flex</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<section class="sidebar">side-left Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquid dicta facere fuga harum incidunt maiores molestiae necessitatibus nihil, nisi obcaecati odio odit quis quisquam rem reprehenderit totam vel voluptatibus?</section>
<section class="container">container Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi debitis deserunt dolore eius enim eum exercitationem explicabo, fuga iusto nam nesciunt nostrum obcaecati odio odit quas rem sapiente suscipit tempora tenetur velit. Accusantium aliquam dignissimos ea eos laboriosam molestiae nemo nobis optio pariatur, rerum tenetur.</section>
<section class="sidebar">side-right Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda consectetur dignissimos eos et hic in ipsa ipsum nam officiis perferendis qui, quisquam recusandae, repellendus, repudiandae rerum tempore. Asperiores at atque consectetur cum, deleniti deserunt dolorum error exercitationem fuga harum illum ipsam nisi nostrum omnis placeat provident, quaerat, qui quos sed sequi temporibus velit voluptatum?</section>
</div>
</body>
</html>
Here is an example of a basic CSS layout with a container element and two sidebars:
HTML:
<div class="container">
<div class="sidebar-left">
<!-- sidebar content goes here -->
</div>
<div class="main-content">
<!-- main content goes here -->
</div>
<div class="sidebar-right">
<!-- sidebar content goes here -->
</div>
</div>
CSS:
.container {
display: flex;
}
.sidebar-left {
width: 20%;
background-color: #ccc;
}
.main-content {
width: 60%;
background-color: #fff;
}
.sidebar-right {
width: 20%;
background-color: #ccc;
}```
flex-basis is the way.
.wrapper {
display: flex;
}
.container {
flex-shrink: 1;
flex-grow: 1;
flex-basis: 1024px;
}
.sidebar {
flex-shrink: 1;
flex-grow: 1;
flex-basis: calc((100vw - 1024px)/2);
}
Replacing 1024px with whatever you desire the container width to be.
Related
I have a card, which has a pre tag inside it. The problem is, that due to the pre tag, the size of the card is getting larger than the container and hence I'm getting a horizontal scroll bar on my webpage. What shall I do to make the pre tag scroll If the content size is bigger than card? Just like code snippets on stackoverflow ansers. They never extend out of the page horizontally, you get a horizontal scroll bar within the snippet.
CSS:
.main {
width: 100%;
background-color: green;
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menu {
width: 200px;
height: 300px;
background-color: red;
flex-grow: 0;
flex-shrink: 0;
}
.card-container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: blue;
height: 500px;
display: flex;
flex: 1;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.card {
position: relative;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
margin: 20px;
background-color: yellow;
max-width: auto; height: 300px;
}
pre {
background-color: black;
color: white;
overflow: scroll;
}
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">
<link rel="stylesheet" href="flex-style.css">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="menu"></div>
<div class="card-container">
<div class="card">
<h1 class="heading">Heading</h1>
<p class="paragraph">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste quaerat earum cum dolore saepe eius dignissimos porro, natus ut omnis maiores deleniti repudiandae distinctio quod? Vero tempore laboriosam maxime quidem accusantium ea qui enim doloremque? Maxime accusantium fuga inventore veniam vero quaerat possimus, id magni consectetur, omnis obcaecati recusandae ipsam.
</p>
<pre>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa placeat quia cum, corporis amet quas repellat, nostrum inventore numquam accusamus possimus minima maxime error iusto obcaecati consequuntur fugiat magnam. Temporibus?
</pre>
</div>
</div>
</div>
</body>
</html>
Any help will be appreciated.
What you're looking for is the white-space: pre-wrap property:
pre {
white-space: pre-wrap;
}
It keeps the default behavior of <pre>, so multiple spaces are being kept as well as new lines, but if the content is too wide for the parent, it gets wrapped.
https://www.w3schools.com/tags/tag_pre.asp
Text in a "pre" element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
If you want to have that effect instead of "pre" tag, put this:
<div
class="container-outer"
style="
overflow: scroll;
overflow-y: hidden;
width: 350px;
height: 210px;
"
>
<div class="container-inner" style="width: 500px">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
placeat quia cum, corporis amet quas repellat, nostrum inventore
numquam accusamus possimus minima maxime error iusto obcaecati
consequuntur fugiat magnam. Temporibus? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Culpa placeat quia cum, corporis
amet quas repellat, nostrum inventore numquam accusamus possimus
minima maxime error iusto obcaecati consequuntur fugiat magnam.
Temporibus?
</div>
</div>
Referance
I am trying to do the holy grail but when I put the ul in my aside code the bullet points are in the main content, I tried padding, margin but I can't get the bullet points out of the main and in the aside area of my code. Would I need to use JS to fix this issue, problem is I am still new to development and I am not too good with JS.
CODE:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
text-align: center;
font-size: 24px;
line-height: 3;
}
header {
background: orangered;
}
main {
background: yellowgreen;
}
footer {
background: deeppink;
}
.nav-bar {
background: dodgerblue;
}
.aside {
background: forestgreen;
}
.container {
display: flex;
flex-direction: column;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
header,
footer {
width: 100%;
}
}
main {
flex: 2;
order: 2;
min-height: 80vh;
}
.nav-bar {
order: 1;
flex: 1;
}
.aside {
flex: 1;
order: 3;
}
footer {
order: 4;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="holygrail.css">
</head>
<body>
<div class="container">
<header>
<h1><i>Lorem ipsum dolor</i></h1>
</header>
<main>
<h6>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempore asperiores aliquam fugiat corrupti quis suscipit
perferendis quod beatae doloribus minus iure incidunt, unde
repellendus odit illo voluptas dignissimos, ea modi!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempore asperiores aliquam fugiat corrupti quis suscipit
perferendis quod beatae doloribus minus iure incidunt, unde
repellendus odit illo voluptas dignissimos, ea modi!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempore asperiores aliquam fugiat corrupti quis suscipit
perferendis quod beatae doloribus minus iure incidunt, unde
repellendus odit illo voluptas dignissimos, ea modi!Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempore asperiores aliquam fugiat corrupti quis suscipit
perferendis quod beatae doloribus minus iure incidunt, unde
repellendus odit illo voluptas dignissimos, ea modi!
</h6>
</h6>
</main>
<nav class="nav-bar">
<h3>Favorite Teams</h3>
Favorite Team<br>
Favorite Team
</nav>
<aside class="aside">
<h3><strong><i>My Bucket List</i></strong></h3>
<br>
<h3>Things I want to Accomplish? </h3>
<ul>
<li>Hawaii</li>
<li>Bahamas</li>
<li>Mauritius</li>
<li><del>New York City</del></li>
<li><del>Statue of Liberty</del></li>
<li>All the states in the USA</li>
</ul>
</aside>
<footer>© Copyright 2020</footer>
</div>
<script src="" async defer></script>
</body>
</html>
Try adding the following to your css:
aside li {
margin-left: 20px;
}
The problem is that the width of the li elements are pushing the bullets out of the container. I've added the following code in the snippet below:
.aside {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.aside ul {
text-align: center;
width: fit-content;
}
The key part is the width: fit-content, which is supported in modern browsers, but probably not ones like IE or Edge or old versions of Safari. This property value makes the ul be as wide as the content of the longest li, but no wider, allowing the bullets to remain within the aside.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
text-align: center;
font-size: 24px;
line-height: 3;
}
header {
background: orangered;
}
main {
background: yellowgreen;
}
footer {
background: deeppink;
}
.nav-bar {
background: dodgerblue;
}
.aside {
background: forestgreen;
}
.container {
display: flex;
flex-direction: column;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
flex-wrap: wrap;
}
header,
footer {
width: 100%;
}
}
main {
flex: 2;
order: 2;
min-height: 80vh;
}
.nav-bar {
order: 1;
flex: 1;
}
.aside {
flex: 1;
order: 3;
}
.aside {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.aside ul {
text-align: center;
width: fit-content;
}
footer {
order: 4;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="holygrail.css">
</head>
<body>
<div class="container">
<header>
<h1><i>Lorem ipsum dolor</i></h1>
</header>
<main>
<h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore asperiores aliquam fugiat corrupti quis suscipit perferendis quod beatae doloribus minus iure incidunt, unde repellendus odit illo voluptas dignissimos, ea modi! Lorem ipsum dolor
sit amet consectetur adipisicing elit. Tempore asperiores aliquam fugiat corrupti quis suscipit perferendis quod beatae doloribus minus iure incidunt, unde repellendus odit illo voluptas dignissimos, ea modi! Lorem ipsum dolor sit amet consectetur
adipisicing elit. Tempore asperiores aliquam fugiat corrupti quis suscipit perferendis quod beatae doloribus minus iure incidunt, unde repellendus odit illo voluptas dignissimos, ea modi!Lorem ipsum dolor sit amet consectetur adipisicing elit.
Tempore asperiores aliquam fugiat corrupti quis suscipit perferendis quod beatae doloribus minus iure incidunt, unde repellendus odit illo voluptas dignissimos, ea modi!
</h6>
</h6>
</main>
<nav class="nav-bar">
<h3>Favorite Teams</h3>
Favorite Team<br>
Favorite Team
</nav>
<aside class="aside">
<h3><strong><i>My Bucket List</i></strong></h3>
<br>
<h3>Things I want to Accomplish? </h3>
<ul>
<li>Hawaii</li>
<li>Bahamas</li>
<li>Mauritius</li>
<li><del>New York City</del></li>
<li><del>Statue of Liberty</del></li>
<li>All the states in the USA</li>
</ul>
</aside>
<footer>© Copyright 2020</footer>
</div>
<script src="" async defer></script>
</body>
</html>
I tried to set to parent block this:
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 500px;
and it works, but it will break if, as example, the second block will be larger. So I am looking for another decision. (I cannot use css-grid)
Codepen Link
Image how it might looks
Try this
.bigger {
height: 300px !important;
}
.smaller {
height: 99px !important;
margin-bottom: 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div class="container-fluid">
<div class="row main">
<div class="col-sm-6">
<div class="col-sm-12"><p>
1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nihil consequuntur itaque placeat est voluptates, temporibus iste nesciunt dignissimos excepturi.
</p> </div>
<div class="col-sm-12">
<p>
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint optio laudantium dolorem doloremque non praesentium sit. Corporis quisquam soluta, ullam unde deleniti at expedita facilis animi dicta facere quam iste!
</p>
</div>
</div>
<div class="col-sm-6">
<p>
3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate. Ullam voluptas maxime eos labore, sed, temporibus tenetur a sunt ratione voluptates excepturi est eaque? Porro, nostrum impedit laborum minima quos at nulla sit officiis. Dignissimos, at. Ipsam delectus dicta ipsum cupiditate.
</p>
</div>
</div>
</div>
Please have a look at the below working example below, hope it helps :)
body .child {
font-family: sans-serif;
}
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 90%;
margin: 0 auto;
}
.child {
margin: 10px;
padding: 50px 20px;
min-width: 39%;
box-shadow: inset 0 0 0 2px #000;
}
.parent {
max-height: none;
}
.child--1 {
order: 1;
}
.child--2 {
order: 3;
}
.child--3 {
order: 2;
padding: 100px 20px;
}
#media screen and (max-width: 500px) {
.parent {
flex-direction: column;
}
.child {
min-width: auto;
}
}
<div class="parent">
<div class="child child--1">Child 1</div>
<div class="child child--2">Child 2</div>
<div class="child child--3">Child 3</div>
</div>
How can I fix the title and make sure it will display?
.cont {
display: flex;
flex-direction: column;
width: 250px;
height: 150px;
border: 1px solid red;
overflow: hidden;
}
.title {
display: flex;
background: #ccc;
justify-content: space-between;
}
<div class="cont">
<div class="title">
<div>title that collapse</div>
<div>28/3/2018</div>
</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab sapiente provident iure ipsa ipsum nulla distinctio vero nisi officiis, id accusantium perferendis enim quisquam. Optio est deserunt atque, explicabo enim excepturi aliquid expedita rerum
voluptates similique ipsam vitae sapiente sequi at earum.
</div>
</div>
https://codepen.io/anon/pen/xWYZEK
Here are two options for solving this problem: min-height or flex-shrink.
Use min-height
Instead of height: 150px use min-height: 150px.
Since you've forced the box to have a fixed height, the content inside will overflow when necessary. With min-height, the box can expand to accommodate content.
.cont {
display: flex;
flex-direction: column;
width: 250px;
min-height: 150px; /* adjustment */
border: 1px solid red;
overflow: hidden;
}
.title {
display: flex;
background: #ccc;
justify-content: space-between;
}
<div class="cont">
<div class="title">
<div>title that collapse</div>
<div>28/3/2018</div>
</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab sapiente provident iure ipsa ipsum nulla distinctio vero nisi officiis, id accusantium perferendis enim quisquam. Optio est deserunt atque, explicabo enim excepturi aliquid expedita rerum
voluptates similique ipsam vitae sapiente sequi at earum.
</div>
</div>
Disable flex-shrink
An initial setting of a flex container is flex-shrink: 1. This means that flex items are permitted to shrink in order to avoid overflowing the container.
Since you have a fixed height on the container, the title is shrinking so that all items can fit inside.
Therefore, an alternative to the min-height option is to disable flex-shrink.
.cont {
display: flex;
flex-direction: column;
width: 250px;
height: 150px; /* back to original */
border: 1px solid red;
overflow: hidden;
}
.title {
flex-shrink: 0; /* new */
display: flex;
background: #ccc;
justify-content: space-between;
}
<div class="cont">
<div class="title">
<div>title that collapse</div>
<div>28/3/2018</div>
</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab sapiente provident iure ipsa ipsum nulla distinctio vero nisi officiis, id accusantium perferendis enim quisquam. Optio est deserunt atque, explicabo enim excepturi aliquid expedita rerum
voluptates similique ipsam vitae sapiente sequi at earum.
</div>
</div>
How can Ｉ make the same width of the NavWrapper as parent?
I want these links at a fixed position even the main section overflows.
I know how to do this without Flex. Is there any pure CSS way to do that?
body {
padding:0;
margin:0
}
.wrapper {
display: flex;
}
nav {
flex: 1 1 150px;
background: gray;
}
.nav-wrapper {
width: 100%;
position: fixed;
top: 0; left: 0;
display:flex;
flex-direction: column;
}
.nav-wrapper a {
flex: 1 1;
border: 1px solid red;
}
section {
flex: 5 1 500px;
padding: 20px;
}
<div class="wrapper">
<nav role="navigation">
<div class="nav-wrapper">
Home
About
</div>
</nav>
<section>
<p>Lorem</p>
</section>
</div>
You don't need fixed position- you can see why I say this after looking at the example below:
Remove the fixed positioning and add height: 100vh to nav:
nav {
flex: 1 1 150px;
background: gray;
height: 100vh;
}
Now wrap the contents on a section into an inner div that is positioned absolute like this:
section {
flex: 5 1 500px;
padding: 20px;
position: relative;
overflow-y: auto;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This will allow the section to remain at 100vh of the nav-wrapper and the extra height will overflow.
body {
padding: 0;
margin: 0
}
.wrapper {
display: flex;
}
nav {
flex: 1 1 150px;
background: gray;
height: 100vh;
}
.nav-wrapper {
width: 100%;
display: flex;
flex-direction: column;
}
.nav-wrapper a {
flex: 1 1;
border: 1px solid red;
}
section {
flex: 5 1 500px;
padding: 20px;
position: relative;
overflow-y: auto;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<nav role="navigation">
<div class="nav-wrapper">
Home
About
</div>
</nav>
<section>
<div class="inner">
<p>Lorem</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
<p>Lorem</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
<p>Lorem</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae, libero inventore nobis et veritatis, laborum vitae, vel eaque omnis ad adipisci quia velit blanditiis qui. Cum voluptas quisquam itaque possimus accusamus repellendus quia iure
asperiores. Unde, rerum nihil maiores nisi, iusto voluptate id cumque incidunt, perspiciatis facilis perferendis explicabo.
</div>
</section>
</div>
Check this out and let me know your feedback. Thanks!