How to prevent the element go outside the div

Question

how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?

PS: I need them to be in row form

The ideal result should be like this:

#main {
  background-color: #666666;
  padding: 60px;
  width: 390px;
}

#second {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 30px;
}

.img-child {
  width: 100%;
  margin-right: 30px;
}

.img-child:last-child {
  margin-right: 0;
}

#img-parent {
  width: 100%;
}

<div id=main>
  <div id=second>
    <img class="img-child" src="http://via.placeholder.com/1600x900">
    <img class="img-child" src="http://via.placeholder.com/1600x900">
    <img class="img-child" src="http://via.placeholder.com/1600x900">
  </div>
  <img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>

TheWuif · Accepted Answer · 2021-11-25T19:11:00.340

5

you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D

.img-child {
    min-width: 0;
    width: 100%;
    margin-right: 30px;
}

edited Nov 25 '21 at 19:11

answered Nov 25 '21 at 19:05

TheWuif

988
6
11

Thanks for `min-width: 0;`. I was just trying to understand why flex properties have no effect on images when they are not wrapped in the `div` blocks. – Gleb Kemarsky Nov 25 '21 at 19:23
i don't know why `flex` needs this. but the first time i needed this i also spend a lot of time to find out :D – TheWuif Nov 25 '21 at 19:26
1

@GlebKemarsky https://stackoverflow.com/q/36247140/8620333 – Temani Afif Nov 25 '21 at 19:49

Hery Kurniawan · Answer 2 · 2021-11-25T19:16:20.280

You can use max-width for each img. I have edited your code for calculate padding each image below...

#main {
  background-color: #666666;
  padding: 60px;
  width: 390px;
 
}

#second > div {
   
  flex-basis: 100%;
  flex-grow:1;
  flex-shrink: 1;
  padding-left: 15px;
  padding-right:15px;
  max-width:100%;

}

.img-child {
  max-width:100%;
}
#second {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
  margin-left:-15px;
  margin-right:-15px;
}

#img-parent {
  width: 100%;
}

<div id=main>
  <div id=second>
    <div>
      <img class="img-child" src="http://via.placeholder.com/1600x900">
    </div>
    <div>
      <img class="img-child" src="http://via.placeholder.com/1600x900">
    </div>
    <div>
      <img class="img-child" src="http://via.placeholder.com/1600x900">
    </div>
    <div>
      <img class="img-child" src="http://via.placeholder.com/1600x900">
    </div>
    <div>
      <img class="img-child" src="http://via.placeholder.com/1600x900">
    </div>
  </div>
  <img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>

I have edited the code, but its needs each img to be wrapped with div — Hery Kurniawan, Nov 25 '21 at 19:16
you will not need the div. the only thing needed would be a `min-width` for the image. its a flex problem. don't know why flex need it. — TheWuif, Nov 25 '21 at 19:25

score 0 · Answer 3 · answered Nov 25 '21 at 19:04

Try this :

body
{
    height:100vh;
    justify-content:center;
    align-items:center;
    display:flex;
}
#main {
  width:391px;
  background-color: #666666;
}
#main .img
{
    width:100px;
    float:left;
    margin:15px;
}
#main .img:nth-child(4)
{
    width:360px;
}
img
{
    max-width:100%;
}

<div id=main>
    <div class="img">
        <img src="http://via.placeholder.com/1600x900">
    </div>
    <div class="img">
        <img src="http://via.placeholder.com/1600x900">
    </div>
    <div class="img">
        <img src="http://via.placeholder.com/1600x900">
    </div>
    <div class="img">
        <img src="http://via.placeholder.com/1600x900">
    </div>
</div>

this will not be responsive. – TheWuif Nov 25 '21 at 19:05 — TheWuif, Nov 25 '21 at 19:05

Weyers de Lange · Answer 4 · 2021-11-25T19:24:10.247

* {
  box-sizing: border-box;
}
.main {
  background-color: #666666;
  padding: 60px;
  width: 100%;
}

.second {
  background-color: #666666;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.column {
  float: left;
  width: 33.3%;
  padding: 5px;
}
.largep {
  background-color: #666666;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>

</style>
</head>
<body>


<div class="row main">
  <div class="column second">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column second">
    <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column second">
    <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
  <div class="largep">
    <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

</body>
</html>

Does not match the expected result – Sachin Yadav Nov 25 '21 at 18:59 — Sachin Yadav, Nov 25 '21 at 18:59

score -1 · Answer 5 · answered Nov 25 '21 at 19:12

#second{
display: flex;
align-items: center;
justify-content: space-around;  
}
.img-child{
width: 30%;
margin-top: 30px;
 margin-bottom: 30px;
}
#img-parent{
  width: 97%;
  margin-left: 12px;
}

<div id=main>
  <div id=second>
    <img class="img-child" src="http://via.placeholder.com/1600x900">
    <img class="img-child" src="http://via.placeholder.com/1600x900">
    <img class="img-child" src="http://via.placeholder.com/1600x900">
  </div>
  <img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>

Does not match the expected result – Weyers de Lange Nov 25 '21 at 19:21 — Weyers de Lange, Nov 25 '21 at 19:21

How to prevent the element go outside the div

5 Answers5