Bollate

HTML

[ANSWERED] html – How can I make a Flex div and it’s (image) children be contained within it’s parent?

By

Nov 18, 2022 , ,

Solution 1 :

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

Than in your grid-area you can create a grid 4×3

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 {
  max-height: 80%;
  max-width: 50%;
  margin: 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 class="grid_area">
      <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>

Solution 2 :

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 class="row" 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 class="row" 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 class="row" 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 class="row" 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.

Solution 3 :

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: 50%;
  align-content: center;
  align-items: center;
  margin: auto;
}

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

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

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="grid_area">
    <div id="grid">
      <div class="row" 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">
        <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>
    </div>
  </div>
</body>


</html>

Problem :

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;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="grid_area">
        <div id="grid">
            <div class="row" id="0">
                <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">
            </div>
            <div class="row" 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 class="row" 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 class="row" 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>

Comments

Comment posted by VIKESIR

You are applying wrong Position to your div. Parent should be relative and child should be absolute.

Comment posted by HomuQB

This still doesn’t let me set the maximum width of the grid to 50% and height to 80%…

Comment posted by UPinar

i dont understand what did you mean ? when you apply percentages (%) it goes to parent element and take its widths 50% if parent element does not applied width value than it goes to grandparent element and use thats width 50% @HomuQB

Comment posted by HomuQB

The parent has a width, no? 100% of the viewport. I want the children to have 50% width of that and the contents inside of it to be resized to fit it. I’m sorry if I’m not making myself clear or if I’m failing to understand something really basic.

Comment posted by UPinar

Okay i think i understand only thing that you need to change set

Comment posted by HomuQB

Unfortunately the images are still not contained within the grid div using this.

Comment posted by VIKESIR

@HomuQB Run the snippet and reply that this is what you need?

Comment posted by HomuQB

No, I wanted the content to be resized to fit the div without scrolling.

Comment posted by HomuQB

That defeats the purpose as I want the content to be resized to fit the 50% width.

Comment posted by Kameron

@HomuQB You can see my edits. Let me know if you have questions.

Comment posted by HomuQB

Sorry for replying so late, but if you don’t mind, upon further inspection I’ve noticed that this doesn’t respect the maximum of 80% height. Is there any way I could achieve that?

By

Related Post

HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022
HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022
HTML

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022