Flex-wrap positioning really weirdly when wrapping-CodePudding

I've been trying to make a website with an image and a div next to each other, and make them responsive so it goes under the div when the screen size changes. It's been working so far, but whenever the image goes under the div, the size changes drastically and gets really weird.

Here's the code used

body{
    margin: 0;
    font-family: HebrewRegular;
    background-color: white;
}

@font-face {
    font-family: HebrewRegular;
    src: url("Adobe Hebrew Regular.otf") format("opentype");
    font-weight: bold;
}

.top-container{
    background-color: white;
    background-image: url("https://picsum.photos/400/200");
    padding: 170px;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    position: relative;
    max-width: 100%;
}

.menuBar{
    background-color: rgb(168, 123, 81);
    padding: 30px 40px;
    text-align: left;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }

.sticky   .content {
    padding-top: 102px;
  }


  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .flex1 {
    background-color:rgba(230,199,177,255);  
    width: 50%;
    margin: 10px;
    text-align: center;
    font-size: 15px;
    line-height: 25px;
  }

  .flex2 {
    background-image: url("https://picsum.photos/400/200");
    background-size:contain;
    background-repeat: no-repeat;
    width: 600px;
    margin: 10px;
    text-align: center;
    margin-top: 100px;
  }

    <body>
        <div class = "top-container"></div>
        <div class = "menuBar" id = "menuBar"> MenuBar</div>
        <div class = "mainContent">
            <div >
               <div class = "flex1">
                  <h3>  Welcome to Charm Thai Restaurant  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum.

                  Vestibulum sodales mauris ut tempor posuere. Nulla orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi. Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue.

                Quisque rutrum laoreet urna eget posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem id metus auctor, sit amet ullamcorper mauris fringilla.

                   In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget hendrerit. 
                </h3>
            </div>
            <div class = "flex2">2</div>
        </div>
    </body>
    <script src="index.js"></script> 


<!-- rgb(255, 209, 218); -->

CodePudding user response：

Define a height or min-height to the image container. I also used flex instead of width to have a better result on wrap

body {
  margin: 0;
  font-family: HebrewRegular;
  background-color: white;
}

.top-container {
  background-color: white;
  background-image: url("https://picsum.photos/400/200");
  padding: 170px;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.menuBar {
  background-color: rgb(168, 123, 81);
  padding: 30px 40px;
  text-align: left;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky .content {
  padding-top: 102px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > * {
  flex:300px; /* added this */
}

.flex1 {
  background-color: rgba(230, 199, 177, 255);
  margin: 10px;
  text-align: center;
  font-size: 15px;
  line-height: 25px;
}

.flex2 {
  background-image: url("https://picsum.photos/400/200");
  background-size: contain;
  background-repeat: no-repeat;
  min-height: 300px; /* added this */
  margin: 10px;
  text-align: center;
}

<div ></div>
<div  id="menuBar"> MenuBar</div>
<div >
  <div >
    <div >
      <h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
        finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
        orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
        Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
        posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
        sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
        id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
        quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
        suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
        eu erat eget hendrerit.
      </h3>
    </div>
    <div >2</div>
  </div>

CodePudding user response：

the problem is the height of your element,

by default all html elements get height:auto; and it means take as much as your children need

so your second box has nothing but a '2' inside of it, that's why it only gets 18px height!

if this is true, then how it is working fine on wider devices?

That's flexbox's magic!

by default the align-items property of flex has stretch value, which means if the flex item has no explicit height, it should stretch and fill the parent's height, your first item has some text in it, right? so first item grows as much as necessary for his text and this causes your flexbox to grow up and wrap the children inside of it and align-items property forces your second box to grow and get the height, so it will get enough height to be visible on larger devices...

how to fix this??

you can use min-height or max-height or both!

you can use @media for smaller devices and set height for your second element to make it bigger

you can use an img tag instead of background and set specific height for it and use object-fit to maintain your image's aspect ratio

you can use padding or <br /> to make your second division big enough to make it's background visible

currently these are all options I can think of, if any better solution came to my mind, I'll let you know