How can I make a Flex div and it's (image) children be contained within it's parent?-CodePudding

I'm trying to make a responsive grid of images but I can't seem to make it work. Either the images are responsive with a max-height and a max-width but the parent div doesn't take their full width (and therefore isn't contained within it's parent) or the images don't have a max-height and a max-width, their parent div has the correct width, but isn't responsive. I hope I have made my problem and my goal clear. Can anyone shed some light on how can I achieve this?

JSFiddle

#grid_area {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#grid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 80%;
    width: 50%;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.row {
  display: flex;
  flex-direction: row;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="grid_area">
        <div id="grid">
            <div  id="0">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1">
            </div>
            <div  id="1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2">
            </div>
            <div  id="2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3">
            </div>
            <div  id="3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4">
            </div>
        </div>
    </div>
</body>


</html>

CodePudding user response：

You can use CSS Grid. Give max-width: (x)px to your .grid-area.

Than in your grid-area you can create a grid 4x3

display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);

Than every image that you add as a child will found a place in the grid.

and you can change your images positions inside Grid with grid-column and grid-row properties.

So i change #A1 image place inside grid with

#A1 {
grid-column: 2 / 3;
grid-row: 2/ 3;
}

https://www.w3schools.com/css/css_grid.asp

img {
  max-width: 100%;
  display: block;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

.grid_area {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

#A1 {
  grid-column: 2 / 3;
  grid-row: 2/ 3;
}

<div >
      <img src="https://source.unsplash.com/random/460x345/" id="A1" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1" />

      <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2" />

      <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3" />

      <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4" />
    </div>

CodePudding user response：

Check this snippet->

* {
  margin: 0;
  padding: 0;
}
html,body {
  width:100%;
  height: 100%;
  box-sizing: border-box;
}
#grid_area {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: #aaa;
}

#grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 80%;
    width: 50%;
    padding: 10px;
    background-color: #fff;
    overflow-y: scroll;
}

img {
  max-width: calc(100% / 3);
  max-height: 100%;
  object-fit: contain;
}

.row {
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
    img {
      max-width: calc(100%);
    }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="grid_area">
        <div id="grid">
            <div  id="0">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1">
            </div>
            <div  id="1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2">
            </div>
            <div  id="2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3">
            </div>
            <div  id="3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4">
            </div>
        </div>
    </div>
</body>


</html>

Hope this will work.

CodePudding user response：

Couple things. Remove the absolute positioning from the #grid_area parent as this will be problematic when expanding the design.

width: 50%; is not enough room for your content. I would remove the width altogether and let it render a width based on your content.

#grid_area {
  display: flex;
  height: 100%;
  width: 100%;
  align-content: center;
  justify-content: center;
  align-items: center;
}

#grid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 80%;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.row {
  display: flex;
  flex-direction: row;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="grid_area">
    <div id="grid">
      <div  id="0">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A1">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1">
      </div>
      <div  id="1">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2">
      </div>
      <div  id="2">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3">
      </div>
      <div  id="3">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4">
      </div>
    </div>
  </div>
</body>


</html>