css 方形限制大小和 position 到父 div

Question

I am trying to get a square to have a limited size and stay within the bounds of the parent div and scale cleanly. I can get one or two of these, but not all.

Setup is I have a main div, two column divs on the left, and a div that takes up the remaining space on the right. I would like the div on the right to contain the square and the bounds of the square stay within the parent div. I can get it to stay put if I don't use the padding-bottom to keep it square, but then the pic of the item looks horrible.

Take a look at my js bin . The pathway to hit the square is: Weapons -> item b1 -> click on it to make it stay

The padding-bottom pushes it way down and outside of the parent div and blows the bottom out of the whole thing.

css

.itempanel{
  display: block;
  align-items: center;
  position: relative;
}
.itemcontainer{
  position: relative;
  top: 30%;
  height: 60%;
  width: auto;
  margin-left: auto;
  margin-right: auto;

}
.itemdisplay{
  display:none;
  flex-direction: column;
  width: 60%;
  padding-bottom: 60%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  align-items: center;
  overflow: hidden;
}
/* .itemdisplay::after{
  content: " ";
  display: block;
  padding-bottom: 100%;
} */

html

<div class="itempanel">
    <div class = "itemcontainer">
      <div id="itemdisplay" class="itemdisplay">
        <img id="itemimg" class="itemimg" src=""></img>
        <div id="itemdesc" class="itemdesc">
          <div id="itemtitle" class="itemtitle"></div>
          <div id="itembody" class="itembody"></div>
          <a id="itemclick" class="itemclick" href="">Click To Place Order</a>
        </div>
      </div>
    </div>
  </div>

Thanks for any help!

*little bit of background - girlfriend wants a skyrim wedding so building out a website for rsvp and stuff. Belethor's shop is going to be setup to help those not so nerdy shop for cheap cosplay outfits. Everything else works just like I want it, but the itempanel/itemcontainer/itemdisplay is not in the display area how I want it.

Answer 1

I see that you have created a class .bottommenu but I don't see it being applied anywhere on your HTML or JavaScript. If you want to display two rows using Flex-box and you are not quite sure of the height of your images or content, you could set that parent container to have a height: auto and on your child container you could use the align-self: flex-end to handle the positioning of items, and on your parent use the justify-content or align-content to your liking. Something like this:

div .parent {
   display:flex;
   height: auto;
   min-width: 300px;
 }

div .child {
   align-self: center;
   width: 100%;
   min-height: 50%;
   height: auto;
   margin: 0 auto;
}

Hope that helps.

Answer 2

figured it out. The psuedo element has to be opposite what padding you are using. For instance, using this worked like I expected it to. it's always the simple things...

.itemdisplay::after{
  content: " ";
  display: block;
  padding-top: 100%;