I am working on a banner and want the banner to have background taking the width of the viewport but content of this banner should take the width of the content space. The content of the banner is in a div who should be at the same position on left than grandparent.
Any idea on how to do it ?
.grandparent{
background-color: rgb(0, 255, 0);
width: 90vw;
height: 30vh;
margin: 30px;
}
.parent{
background-color: rgb(0, 0, 255);
width: 100vw;
height: 15vh;
position: relative;
left: calc(-50vw + 50%);
display: flex;
align-items: center;
}
.child{
background-color: rgb(255, 0, 0);
width: 20vw;
display: flex;
justify-content: space-between;
}
<div class="grandparent">
<div class="parent">
<div class="child">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
</div>
https://jsfiddle.net/khdz7ugq/
Schema of what I have in mind
Related
I try to make parent div - background color, rounded corners and overflow hidden,
put inside child div with background color, but I see small gap of parent color.
How can it be and how to fix this?
the main task is not to change the HTML
here code
https://codepen.io/batareika007/pen/ZERWmBM
.container {
max-width: 300px;
margin: 0 auto;
}
.parent {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
border-radius: 1rem;
height: 100px;
background: red;
}
.child {
padding: 1rem;
height: 50px;
background: rgb(230, 230, 230);
/* if you make background white, you see the gap more clearly */
/* background: white; */
}
<div class="container">
<div class="parent">
<div class="child">some content here</div>
</div>
</div>
tried position, z-index, play with the borders...
Adding height or padding to the parent element causes this issue to happen.
I'm not sure if this is problem with chrome's engine or just a bug.
Here's a hacky solution.
Remove overflow: hidden from the parent.
Add a box-shadow with the same background-color as the child to the child.
Offset the box-shadow down a bit.
And finaly add border-radius to the child.
.container{
max-width: 300px;
margin: 0 auto;
}
.parent{
width:100%;
display:flex;
flex-direction:column;
justify-content: flex-end;
border-radius: 1rem;
height: 100px;
background: red;
}
.child{
padding: 1rem;
height: 50px;
background: rgb(230, 230, 230);
border-radius: 0 0 1rem 1rem;
box-shadow: 0 2px 0 rgb(230 230 230);
/* if you make background white, you see the gap more clearly */
/* background: white; */
}
<div class="container">
<div class="parent">
<div class="child">some content here</div>
</div>
</div>
I replaced the child's bottom padding with the parent's bottom border.
Now you can change the height of the child, but you'd also need to adapt the height of the parent.
.container {
max-width: 300px;
margin: 0 auto;
}
.parent {
width: 100%;
height: calc(100px - 1rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
border-radius: 1rem;
border-bottom: 1rem solid rgb(230, 230, 230);
background: red;
}
.child {
height: 50px;
padding: 1rem 1rem 0 1rem;
background: rgb(230, 230, 230);
/* if you make background white, you see the gap more clearly */
/* background: white; */
}
<div class="container">
<div class="parent">
<div class="child">some content here</div>
</div>
</div>
I have a HTML and CSS files containing the following code:
<div class="app">
<div class="header"></div>
<div class="main">
<div class="container_1">
<h1>Item</h1>
<h1>Item</h1>
<h1>Item</h1>
..
</div>
<div class="container_2"></div>
</div>
</div>
html, body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
}
.app{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.header{
width: 100%;
min-height: 50px;
background-color: rgb(255, 235, 147);
}
.main{
display: flex;
width: 100%;
height: 100%;
}
.container_1{
display: flex;
flex-direction: column;
width: 200px;
height: 100%;
background-color: rgb(255, 147, 147);
overflow-y: auto;
}
.container_2{
width: 200px;
height: 100%;
background-color: rgb(147, 147, 255);
}
Which looks like this:
page with header
When removing the div element which contains the header class, the extra scrolling bars are gone (which is what i want):
page without header
How can I get rid of the extra horizontal and vertical scrolling bars (not including the vertical one inside the div with the container_1 class) without removing the div containing the header class?
display:grid is a better layout choice than flexbox for this:
html, body{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
}
.app{
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 200px 200px auto;
height: 100%;
}
.header{
min-height: 50px;
background-color: rgb(255, 235, 147);
grid-column: 1 / span 3;
}
.main {
display:contents;
}
.container_1{
background-color: rgb(255, 147, 147);
overflow-y:auto;
}
.container_2{
background-color: rgb(147, 147, 255);
}
<div class="app">
<div class="header"></div>
<div class="main">
<div class="container_1">
<h1>Item</h1>
<h1>Item</h1>
<h1>Item</h1>
<h1>Item</h1>
<h1>Item</h1>
...
</div>
<div class="container_2"></div>
</div>
</div>
I tried to recreate this on a Mac, but for me, it is working fine.
However, I would say, experiment using overflow: hidden on your elements.
You could try adding overflow: hidden to your body element and see how that goes.
Also, don't forget we also have overflow-y and overflow-x which are both useful.
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>
I'm trying to add a vertical rule in a flex row whose height is not fixed (it is sized to fit its other contents).
I would like for the vertical rule to stretch the full height of the container (excluding the padding). I have tried align-items: stretch on the flex row, align-self: stretch on the vertical rule div, and height: 100% on the vertical rule div, but no matter what I do, the vertical rule only ever seems to have a height of 0px:
.row {
display: flex;
flex-direction: row;
background-color: orange;
width: max-content;
align-items: stretch;
margin-bottom: 12px;
padding: 12px;
height: max-content;
}
.vr {
height: 100%;
width: 1px;
background-color: black;
align-self: stretch;
}
.purple {
background-color: purple;
height: 80px;
width: 50px;
}
.lightblue {
background-color: lightblue;
height: 80px;
width: 50px;
}
.red {
background-color: red;
height: 120px;
width: 50px;
}
.blue {
background-color: blue;
height: 120px;
width: 50px;
}
<div class="row">
<div class="red"></div>
<div class="vr"></div>
<div class="blue"></div>
</div>
<div class="row">
<div class="purple"></div>
<div class="vr"></div>
<div class="lightblue"></div>
</div>
Is there any way that I can have my .vr div stretch to the full height of the container without giving the container a fixed height?
Removing the height: 100% from the .vr rules did the trick for me.
I use a third-party component that occupies all the available space, i.e. width=100% and height=100%. I don't have control over it.
I'm trying to fit it in the following layout, but its height=100% doesn't work (I expect the third-party component to occupy all the green space).
Why? How would you fix that?
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
In general, for an element using percent on height to pick up its parent's height, the parent need a height other than auto or being positioned absolute, or the height will be computed as auto.
Based on those 2 options, and as you mentioned in a comment, your own header is dynamic in height, you are left with absolute positioning.
The problem with adding absolute to the content, it will be taken out of flow and stop behaving as a normal flowed flex item, the good news, one can add a wrapper set to absolute.
Stack snippet
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
position: relative; /* added */
flex-grow: 1;
background-color: rgba(0, 255, 0, 0.5);
}
.wrapper {
position: absolute; /* added */
left: 0; /* added */
top: 0; /* added */
right: 0; /* added */
bottom: 0; /* added */
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="wrapper">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
</div>
Another option could be to update the Flexbox properties, to give the content a height, using flex: 1 1 100% and give header flex-shrink: 0; so it doesn't shrink (as content got 100%).
This might not work on Safari though, as I know it have had issues when the height property is not set, though can't test that now as I don't have access to Safari.
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
flex-shrink: 0;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
flex: 1 1 100%;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
Because .content haven't height (height = 0px) and .third-party-component have 100% of 0px. You can add propety height : calc (100% - <height of .header>) into .content
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
height: calc(100% - 18px);
flex-grow: 1;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>
You can simply use another flex container in the .content element:
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 100px;
}
.header {
display: flex;
background-color: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: rgba(0, 255, 0, 0.5);
}
.third-party-component {
flex-grow: 1;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 255, 0.5);
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="third-party-component">
Third party component
</div>
</div>
</div>