hello everybody I have a problem with flexbox and responsive .....this the picture:
I would the red section and the black section with 100% but as you can see I have not... I don't know why... I need a wrap in the blue and red section so I need to fix a min-with for both but red and black also if I had used flex:1 1 100% is still as in a picture can you help me? So why the red and the black are short of the blue and fuxia? even if I set with:100% or 100vw or flex :1,1, 100%...
Where is my mistake?
body{
margin: 0 auto;
background: rgb(16, 235, 235)
}
.item{
height: 500px;
flex:1 1 100%;
}
.container{
display: flex;
flex-flow: row wrap;
background: red;
width: 100vw;
}
.item1{
background: red;
display: flex;
flex-flow: row wrap;
}
.int1item1{
background: orange;
flex: 0 1 60%;
align-self: center;
}
.myText{
margin-top:50px;
text-align: center;
}
.item2{
background:yellow;
display: flex;
flex-flow: row wrap;
}
.int1Item2{
background:blue;
min-width: 200px;
flex: 1 1 40%;
}
.int2Item2{
background:fuchsia;
min-width: 400px;
flex: 1 1 60%;
}
.item3{
background:black;
}<div class="container"><div class="item item1"><div class="int1item1">
here title<div class="myText"><h2>Fix part</h2><p>
here some text</p><p>
here some text</p></div></div></div><div class="item item2"><div class="int1Item2">
here a text </div><div class="int2Item2">
here text</div></div><div class="item item3"></div></div>this is a link of my code:https://repl.it/@matteo1976/test-flex-box