Two floating divs in div

Question

I have a div and two div s on one line in this master div . But I want, when I change the browser window, that the second div moves under the first div . I don't want horizontal scroll.

 div.footban { width: 100%; text-align: center; display: flex; } div.footban div { border: solid 1pt black; display: table; min-width: 300px; margin: 0 auto; }

 <div class="footban"> <div>Hello Hello Hello Hello Hello Hello</div> <div>Hello Hello Hello Hello Hello Hello</div> </div>

Answer 1

All you have to do is add flex-wrap: wrap; to div.footban :)

 div.footban { width: 100%; text-align: center; display: flex; flex-wrap: wrap; } div.footban div { border: solid 1pt black; display: table; min-width: 300px; margin: 0 auto; }

 <div class="footban"> <div>Hello Hello Hello Hello Hello Hello</div> <div>Hello Hello Hello Hello Hello Hello</div> </div>

Answer 2

You can also use the @media queries

Just add the display: block

@media all and (max-width:768px){
    div.footban{display: block;}
}

Answer 3

div.footban {
    display: flex;
}

when you set the display property of an element to flex like you did, the flex-direction by default is set to row which put every direct child element on the same line

when you resize you window you can just set some media query that take effect on certain size of your browser window and reset the flex-direction to column and that will put every direct child of the div.footban to be align verticaly and the second div will be under the first one

// I use 768px just for sample purpose

@media all and (min-width : 768px) {
    div.footban {
        flex-direction: column;
    }
}