Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Stefan Cutajar
Stefan Cutajar
7,747 Points
Posted by Stefan Cutajar
Stefan Cutajar
7,747 Points

Why images overflow its flex container?

Hi, I'm practicing a little bit on a website I'm building for practice and I noticed that images inside flex containers overflow when I give height to the container is there anyway to fix this please?

<div class="wrapper"> <div class="flex"> <div class="middle"> <!-- Middle Content --> <h1>The Restaurant</h1> <p> Lorem ipsum dolor sit amet, ad omnis nulla duo, sit ne platonem voluptatum intellegam. Vis eirmod ceteros ex, est cu commodo tibique suavitate. Eos ei partem deserunt senserit, nec invidunt volutpat et. Mel volumus atomorum in, nec congue quodsi ad, in vix omittam recusabo</p> </div> <div class="middle-images"> <!-- Images next to text --> <img src="one.jpg" alt="one"> <img src="two.jpg" alt="two"> </div> </div>

          ```CSS

.wrapper { width: 80vw; margin: 0 auto; } .flex { display: flex; border: 1px solid black; height: 500px; flex-direction: row; } .middle-images { display: flex; flex-wrap: wrap; }

.middle-images > img { width: 100%;

}

2 Answers

Andrey Misikhin
Andrey Misikhin
16,529 Points
Andrey Misikhin
Andrey Misikhin
16,529 Points

I don't know what you want to do, but may give you a start point. It is not needed to add one more container for flex inside wrapper. In wrapper must be basic flex rules (display: flex; flex-wrap: wrap;)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Made with Thimble</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="middle"> <!-- Middle Content --> 
        <h1>The Restaurant</h1> 
        <p> Lorem ipsum dolor sit amet, ad omnis nulla duo, sit ne platonem voluptatum intellegam. Vis eirmod ceteros ex, est cu commodo tibique suavitate. Eos ei partem deserunt senserit, nec invidunt volutpat et. Mel volumus atomorum in, nec congue quodsi ad, in vix omittam recusabo</p>
      </div>
      <div class="middle-images"> <!-- Images next to text -->     <img src="https://s00.yaplakal.com/pics/pics_original/9/4/3/8037349.jpg" alt="one">
        <img src="https://s00.yaplakal.com/pics/pics_original/9/4/3/8037349.jpg" alt="two"></div></div>
  </body>
</html>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black; 
}

.middle {
  border: 1px solid black;  
}

.middle-images {

}
Stefan Cutajar
Stefan Cutajar
7,747 Points
Stefan Cutajar
Stefan Cutajar
7,747 Points

Hi, sorry if my code was hard to read I posted it with my phone and lost the space for some reason I can repost it if its better to understand. What am I trying to do is creating a flex container with text on the left side and than two images next to each other that can be resposive. Guil mentioned that when you give height to a container its items will be stetched to the height of the container however this dont seem to work when the items are images is this its normal behavior it's because I'm doing something wrong?