I'm currently having a issue I've been having for some days. I have a div which has a section which in that section is a list of fruits. I'm trying to make the list scrollable with a height of 80%, although the generated-list container has a height:100% and which the main container has a height of min-height:100vh which is interfering with that. Since the list's primary div doesn't have a set height it just keeps overflowing. What can I do?
Code Structure:
https://i.imgur.com/tI8dRFl.png
Problem: https://i.imgur.com/FfkKUg8.gif
.container {
width: 100%;
min-height: 100vh;
display: flex;
}
.generated-cnt {
display: flex;
flex-direction: column;
height: 100%;
width: clamp(200px, 30vw, 500px);
}
.generated-list {
height: 80%;
padding: 20px 35px;
gap: 20px;
display: flex;
flex-direction: column;
}
Related
I have this setup in which i need the form, the button and the select box to occupy all the availabe space horizontally. In small screen sizes all works as intended
however when I test it in bigger screens all the space is not filled by the child elements
I tried both grid and flex->row approaches with the same result. How do i fix my code that even in bigger size the child elements fill all the available space horizontally with equal spaces between them?
.grand-parent {
margin-top: 2%;
left: 0%;
position: relative;
display: flex;
flex-direction: row;
}
.parent {
min-width: 395px;
position: relative;
/* display: flex;
flex-direction: row; */
display: grid;
grid-template-columns: 1fr 1 fr 1fr;
grid-auto-flow: column;
padding-left: 5%;
justify-content: space-between;
}
.child {
background-color: blue;
color: rgba(0, 0, 0, 1);
height: auto;
position: relative;
font-size: 24px;
align-self: center;
}
If you only have one row and want all children to be the same size, then the usual approach for me would be to use display: flex on the parent and flex-grow: 1; flex-basis: 0 on the children. No need for flex-direction: row. Also make sure that the parent is actually the width you expect, i.e. it also fills the whole width.
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'm getting some unexpected behavior with my margins using flex and I would like some help in understanding why.
I'v got some simple html like so:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
And my scss file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
What I am expecting is that the inner container will completely fill up the parent container, minus 100px on the top and bottom and 50px on the right and left. The vertical margin works as expected, but the horizontal margin actually extends out of the parent div, so that the inner container still appears to be taking up the entire width of the parent div.
I'm not sure if this is related to flexbox or not.
Here is an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj
When using align-items: center with column direction, the item will collapse to its content width, instead of with its default, stretch, which makes it fill its parent's width.
Additionally, when setting width: 100% to the inner, it will override the default stretch, which will make the item be 100% of parent's width + margin.
For the expected output, remove align-items: center on the outer and width: 100% on inner.
Stack snippet
html {
height: 100%;
overflow: auto;
}
.outer {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f4f6f8;
height: 100%;
}
.inner {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
text-align: center;
margin: 100px 80px;
}
<div class='outer'>
outer
<div class='inner'>
inner
</div>
</div>
After resizing of page nested content-box get down thru main div and break it.
It's look like so:
Here is live example (Content loading work on Chrome only). Here is jsfiddle
The css code that response for displaying problem (as I think) part:
.Central {
display: flex;
flex-direction: row;
flex-grow: 1;
height: auto;
}
.LeftSide {
background-color: #ddd0d1;
flex-grow: 8;
}
.RightSide{
background-color: #965254;
flex-grow: 1;
}
Instead of height: 100vh, use min-height: 100vh.
.MainContainer {
background-color: #fee9ea;
margin-left: 0%;
margin-right: 0%;
/* height: 100vh; <-- remove fixed height */
min-height: 100vh; /* new */
box-sizing: border-box;
display: flex;
flex-direction: column;
}
That will release your main container to expand with the content.
If you prefer the fixed height, then keep the height: 100vh and add vertical scroll:
.LeftSide {
background-color: #ddd0d1;
flex-grow: 8;
overflow: auto; /* new */
}
I have the following construct to render a simple layout with fixed header and footer and a flexible body that with scrollable content: http://jsbin.com/jokevuyave/1/edit?html,css
<div id="main-view">
<div class="rows">
<div class="head">header</div>
<div class="main scroll"></div>
<div>footer</div>
</div>
</div>
and this are the styles:
.rows,
.columns {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.columns {
flex-direction: row;
max-height: 100%;
overflow: hidden;
}
.main {
flex: 1;
}
.scroll {
display: flex;
overflow: hidden;
position: relative;
flex-direction: column;
}
.scroll > * {
margin: 0;
width: 100%;
overflow: auto;
}
html,
body,
#main-container,
#main-view,
.scrollable {
height: 100%;
margin: 0
}
#main-view > div {
max-height: 100%;
display: flex;
}
.head {
height: 120px
}
This construct works well in firefox and also in chrome until the version 43 was released. Now the height of the containers is wrong, header and footer don't expand to display its content and the content container lays over the header content. Any idea how to fix this?
Edit
The problem seems to be this line:
#main-view > div {
max-height: 100%;
}
The idea is that the box should only expand if the content is to large.
Change it to
#main-view > div {
height: 100%;
}
fix the wrong height for the inner container but now the box has always the height of 100%, even if the content is really small.
There is a problem with max-heigth and flexbox: flexbox misbehaving with max-height
So the solution is to set the flex property to every element insight rows container to 0
.rows .main {
flex: 1;
}
.rows > * {
flex: 0 0 auto
}