I have this
.parentcontainer
{
background-color: black;
max-width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: space-around;
}
.aside
{
display:flex;
flex: 30%;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
.content
{
background-color: blue;
flex: 70%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
max-height:800px;
}
.content img
{
width: 100%;
max-width: 100%;
height: auto;
}
when I resize the browser the imgs of the .content doesnt resize and I need to do a horizontal scroll. How can I do for resizing the images? and the child container doesnt get bigger than the parent container. thanks.
EDIT: now I change .content to columns, and mas height to 800px. I want the articles of the .content go down,and when they reach 800px, make another column. the problem stays, the articles of .content goes outside the parent box instead or resize...
Try this:
.content img{
width: 100%;
max-width: 100%;
height: auto
}
Related
I am facing a problem with flex-direction: column on responsive mode. When I write flex-direction: column to .container its not wrapping to responsive like flex-direction: row, it's going outside of the layout. How to fix that?
<div class="content">
<div class="container">
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
</div>
</div>
.content {
width: 100%;
min-height: 800px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
background-color: whitesmoke;
}
.container {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
.box {
width:700px;
margin: 10px;
color:white;
min-height: 70px;
display: flex;
align-items: center;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
justify-content: space-around;
background-color: indigo;
flex-direction: column;
flex-wrap: wrap;
}
You have a fixed width setting for .box (700px). Change that to width: calc(100% - 20px) (i.e. full width minus 20px for the margin left and right) in a media query, then it will work as desired.
#container {
display: flex;
flex-direction: column;
align-items: center;
height: 200px;
width: 100px;
background-color: red;
}
#stack{
display: flex;
flex-direction: column;
align-items: center;
max-height: 200px;
}
.item {
display: flex;
height: 30px;
width: 100px;
background-color: green;
flex-shrink: 0;
}
.spacer {
display: flex;
height: 200px;
flex-shrink: 1000;
}
<div id="container">
<div class="stack">
<div class="item">a</div>
<div class="spacer"></div>
<div class="item">b</div>
</div>
</div>
As the code shows above, parent had a max-height as the height of it is undefined.
I want the height of spacer was as large as possible. And what I expect is 160px in this situation.
I had tried flex-grow, but it doesn't work as the container has no height.
I had tried flex-shrink and a large height like the code in snippet either. But I found that sometime flex-shrink not work, or sometimes it looks scary with a very large height.
it does not work because you use a wrong selector for "stack" - it is a class, not id!
This should work: https://jsfiddle.net/bL5w81d4/1/
#container {
display: flex;
flex-direction: column;
align-items: center;
height: 200px;
width: 100px;
background-color: red;
}
.stack{
display: flex;
flex-direction: column;
align-items: center;
max-height: 200px;
}
.item {
display: flex;
height: 30px;
width: 100px;
background-color: green;
flex-shrink: 0;
}
.spacer {
display: flex;
height: 200px;
flex-shrink: 1000;
}
Div scroll is not showing automatically.
.sectionContent {
height: 100vh;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
}
.asideContent {
flex: none;
width: 30rem;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
background: #eceff1;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: space-between;
min-height: 100%;
}
.rightSideDiv {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 2rem;
min-height: 100%;
}
I am having Section inside that having aside and Div. Div scroll not showing automatically and some times showing but div not fully displaying when check in responsive way. here I am providing in section, aside, div css classes, please help.
After changing .sectionContent as {height: 60vh} its working , but i am not sure its correct or not.
I have following situation where css flex based masonry displayed images overflowing the parent div's width. It is supposed to go downwards like a normal Masonry.... but I can't figure it out how to fix this.
I wrote my code like below...
HTML
<div class="mansory-gallery">
<div class="item">
<img src="http://minoboshitaro.com/wp-content/uploads/2017/11/51AEWKP5CQL._SX339_BO1204203200_.jpg">
</div>
</div>
CSS
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
}
.item {
width: 28%;
padding: 15px;
margin: 5px;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Please let me know how to solve this!
Thank you for your time!
Try using justify-content: space-around; instead of margins.
.mansory-gallery {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-flow: column wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 100vw;
flex-direction: column;
justify-content: space-around;
}
.item {
width: 28%;
flex-grow: 1;
text-align: center;
display: flex;
flex: 1 1 auto;
}
.mansory-gallery a img {
max-width: 100%;
transition: .8s opacity;
height: auto;
}
Example - https://codepen.io/nhensh/pen/OZRgYa
If I have a flexbox container with a fixed child, but it does not seem to wrap elements correctly:
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
</div>
#parent {
display: flex;
flex: 1;
flex-direction: column;
flex-wrap: wrap;
}
#child-1 {
display: flex;
flex: 1 0 auto;
position: fixed;
}
#child-2 {
display: flex;
flex: 1 1 auto;
overflow-y: scroll;
}
Add position:sticky; and top:0; to the #child-1 instead of position fixed;
I have fixed this with:
parent:
display: flex;
flex-direction: column;
height: 100%;
child 1:
display: flex;
flex: 1 0 auto;
justify-content: space-between;
flex-wrap: wrap;
child 2
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
overflow-y: auto;