Okay, so i have a wrapper with 3 columns where the middle container is of a fixed width of 595px. The left and the right has a 2:1 size ratio. But when i put content into the left container which has width auto it exceeds the main wrappers width (width of screen 100%);
How do i solve this problem. I dont want it start grow like that i just want the colums to be responsive but width different width ratios.
If it helps, im in a angular project and i have a mat tab group inside the left column. I stil dont think this is the issue since it shouldnt exceed its main width
Here's the scass im using:
.row {
display: flex;
width: 100%;
justify-content: space-between;
flex-direction: row;
& .column {
margin: 5px;
&.left {
flex: 2;
margin-left: 50px;
}
&.middle {
min-width: 595px !important;
max-width: 595px !important;
flex:initial;
}
&.right {
min-width: 350px !important;
flex: 1;
}
}
}
Related
I have such html and css code. I have two questions:
When the window width is 600px, in theory, the left box should be of 150px width, because it's the 25% of the parent(600px), but the width is 120px.
The right box can not reach 100vw. It just takes the widthOfParent - widthOfLeft. I suppose it should somehow overflow and reach 100vw.
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
* {
margin: 0;
padding: 0;
}
.container {
height: 300px;
/* your code here */
display: flex;
justify-content: start;
}
.left {
background-color: #f44336;
height: 100%;
width: 25%;
min-width: 100px;
}
.right {
background-color: #2973af;
height: 100%;
width: 100vw;
}
codesanbox: https://codesandbox.io/s/admiring-darkness-cu99x?file=/src/styles.css:0-293
You are facing the shrink effect. In all the cases the total width 100vw + 25% is bigger than 100% so both items will shrink equally.
Since your container is also full width, the overflow will always be equal to 25% or 25vw. Both element have the default shrink value 1 so we have a sum equal to 125vw.
The first element width will be equal to: 25vw - (25vw * 25vw/125vw) = 20vw
and the width of the second item will be: 100vw - (25vw * 100vw/125vw) = 80vw
You can logically see that the total is 100vw (20vw + 80vw) and when the screen width is equal to 600px, 20vw is equal 120px.
To avoid this, disable the shrink effect on the first item by setting flex-shrink:0
* {
margin: 0;
padding: 0;
}
.container {
height: 300px; /* your code here */
display: flex;
}
.left {
background-color: #f44336;
width: 25%;
min-width: 100px;
flex-shrink:0;
}
.right {
background-color: #2973af;
width: 100vw;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Related: Why is a flex item limited to parent size?
use "flex" property instead of width for the flex items
.container {
height: 300px;
width: 600px; /* added fixed width for testing */
display: flex;
justify-content: start;
}
.left {
background-color: #f44336;
min-width: 100px;
flex: 1; /* 1/4 ratio within the parent element, as the other flex item in the parent is "flex: 3;" */
}
.right {
background-color: #2973af;
flex: 3; /* 3/4 ratio within the parent element, as the other flex item in the parent is "flex: 1;" */
}
The right element cannot take 100% of the width, as it is together with the left div inside the flex parent and we assigned the width parameter as "flex: value" for both
CSS flex Property
https://www.w3schools.com/cssref/css3_pr_flex.asp
So I am building a 3 column preview card using HTML, CSS and FLEXBOX. I built it using the mobile-first approach. It starts off as a column but when it is being expanded and it reaches a certain dimension, it transforms into a row. The problem I am having is that as the containers transform to a row, they grow in different sizes. The heights grow differently as some become columns become taller than others. How can I make sure they all grow at the same rate? How do I make sure that one column does not become larger than the other as they are being expanded? I tried setting flex-grow to 1 and flex-shrink to 1 but it is not working. Please find relevant parts of my code below.
Here is a link to the live version of my site
body {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
--The panel is the container as a whole--
.panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid white;
border-radius: 10px;
width: 100%;
max-width: 960px;
height: 100%
}
--I am styling each column below--
.panel section {
display: flex;
padding: 2.5rem;
flex-direction: column;
text-align: left;
border-bottom: none;
height: 100%;
#media only screen and (min-width: 560px) {
.panel {
display: flex;
flex-direction: row;
border-radius: 10px ;
width: 80%;
height: 100%;
}
.panel section {
height: 100%;
}
}
Remove the height: 100% from the child elements and just simply change the align-items to stretch on desktop, that will create equal height columns.
Well there can be different ways to solve this.
Problem : Due to which this error occur . It the difference between the amount of content in three containers as middle has more content that is you have told more about SUVS . This is the cause
Solution : Either you can make the content almost equal or can make the height of container bigger so that content can easily fit
Content equal and Content fixed height - Less compatible as content can vary on need
Increase height of container - Using hard code(400px; 30em) you can increase the height of the container according to need of content . And you can position Learn more btn at bottom using absolute position . So that it positioned at equal height
#media only screen and (min-width: 560px)
.panel section {
height: 30em;
position: relative;
}
.general-button {
background-color: var(--major-color);
border-radius: 5rem;
padding: 0.89rem;
margin: 1.1em 0;
border: none;
width: 8rem;
position: absolute;
bottom: 0;
}
I have a "boxHeader" which height is fixed to 64px and a "boxcontent" which I want height to be fixed to the remaining space.
My problem: if the height of the children in the "boxContent" exceed the height of the remaining space, it will also increase the height of "boxContent". And I don't want that, I want the children of "boxContent" to respect the max size (and add scroll)
Edit: The children inside "boxContent" are React Components, I have a "Sider" of Ant Design containing multiple Panel's Collapse AND I have a Content side by side. I want to add a scroll bar on the Sider AND on the Content so both Sider and Content have overflow-y: auto
Can you help me ?
Here the code
<div id="container">
<div id="boxHeader">
<HeaderArea />
</div>
<div id="boxContent">
{...}
</div>
</div>
#container {
display: flex;
flex-flow: column;
height: 100% !important;
min-height: 100% !important;
#boxContent {
/* height: calc(100vh - 64px); this works, but i don't want to calcule the size*/
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}
#boxHeader {
flex: 0 0 64px;
}
body{
height: 100vh; /*100% is also tested*/
}
You can give #boxContent max-height and overflow-y: scroll with these two I think it is going to work. But If it is not can you add your HTML so that I can look and fix it. I hope this line of code fixes your problem.
#boxContent {
max-height:300px; //(for example)
overflow-y: auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}
This is my first week working with flexbox, and I like it a lot until now. I am doing everything I can to get away of floating elements. Therefore my main purpose is not a solution there is floating elements in. I run into 2 problems, that I am not quite sure of the correct saolution.
Problem 1:
When I hit around 1200px I can see the 2 columns is starting moving together. How can that be?
Problem 2:
Why is my columns not fitting on viewport under 768px? I can see on the mobile the 900x200 is going over the edge of the max width on telephone.
Example page of my code here.
.column-layout {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
.column-layout-one {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
.header-item-one {
order: 1;
}
.header-item-two {
order: 2;
}
#media (min-width: 768px) {
.column-layout-one {
display: flex;
justify-content: space-between;
}
}
<div class="column-layout-one">
<div class="header-item-one">
<img src="http://placehold.it/280x200">
</div>
<div class="header-item-two">
<img src="http://placehold.it/900x200">
</div>
</div>
.column-layout {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
img {max-width: 100%;}
.column-layout-one {
max-width: 1200px;
background-color: #fff;
margin: 40px auto 0 auto;
}
.header-item-one {
order: 1;
}
.header-item-two {
order: 2;
}
#media (min-width: 768px) {
.column-layout-one {
display: flex;
justify-content: space-between;
}
}
<div class="column-layout-one">
<div class="header-item-one">
<img src="http://placehold.it/280x200">
</div>
<div class="header-item-two">
<img src="http://placehold.it/900x200">
</div>
</div>
When I hit around 1200px I can see the 2 columns is starting moving together. How can that be?
Your .column-layout-one has max width 1200 set, inner elements has 280+900 = 1180 px, and you have used space-between on its parent. so, when the parent has space more than its defined width, inner items will be seprated by diffrence of 1200-1180 = 20px; as soon as its parent will shrink this space will reduce, because its the space left by these 2 divs,
Space-between = outerWidth - (Total of inner width)
if you want your images to fit in screen on mobile, then provide it
max-width: 100%, if you will not do so, itwill take its orignal width and distort your design.
Set your .header-item-one and -two to flex: 1; to fill up the whole space in your flex box. Then, set max-width values for the expected results.
.header-item-one {
flex: 1;
max-width: 200px;
background-color: red;
height: 300px;
}
.header-item-two {
flex: 1;
max-width: 900px;
background-color: blue;
height: 300px;
}
About the other problem -- the divs go over the viewport boundaries, because you have placeholder images. Images are fixed-width inline block elements, meaning they won't fit the user's viewport, unless you crop them out with overflow-x: hidden; in the parent div or do something like div img { max-width: 100%; }.
Remove the images and try out that css. Fiddle: https://jsfiddle.net/59meh6vs/
Trying to get cdk-virtual-scroll-viewport height to be equal to page height.
<div class="plServiceItemsList-list">
<cdk-virtual-scroll-viewport class="plServiceItemsList-listViewPort" itemSize="20">
When trying to use height 100%, I see no list
.plServiceItemsList-listViewPort {
height: 100%;
min-height: 100%;
}
The only way it will be displayed is specifying a height:
.plServiceItemsList-listViewPort {
height: 100px;
}
But this is not dynamic.
After #Chellappan suggested using vh, I thought my issue was solved, but actually, when the page size what bigger than the screen, it failed.
This is what I used:
.plServiceItemsList-listContainer {
display: flex;
flex-direction: column;
min-height: 100%;
}
.plServiceItemsList-listViewPort {
flex-grow: 1;
}