Question 321833 in Html Question posted in
Some basic documentation can be found here.

Html – Text in content area within div not overflowing correctly

so my issue is for some strange reason I’m having difficulty setting an overflow in the content area. I’ve tried using max-height and overflow-y: auto in the .window1.content selector but that shrinks the size of the image which I don’t want. I just want a vertical scroll wheel to appear without messing up what I’ve already defined.

.window {
  position: absolute;
  z-index: 9;
  background-color: rgba(20, 19, 43, 1);
  text-align: center;
  width: 500px;
  height: 400px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.close-button {
  background: rgba(0, 0, 0, 0.0);
  border: 0px;
  float: right;
  margin-right: -4px;
  margin-top: -1px;
}

.windowheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: rgba(37, 35, 58, 1);
  color: #fff;
  height: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.window1 img {
  margin-top: 10px;
  margin-bottom: 0;
  width: 70%;
  align-self: center;
}

.window1.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  overflow-y: auto;
}

.content h1,
p {
  font-family: 'SF Pro Display';
  margin-left: 72px;
  margin-top: 2px;
  text-align: left;
  color: rgb(171, 168, 168);
}

.content h1 {
  font-size: 26px;
  font-weight: 600;
}
<div id="window1" class="window desktop hidden">
  <div class="windowheader">
    <div id="window1-title">LLLJJJIII</div>
    <button class="close-button" onclick="closeTab(2)"> <div id="circle"></div> </button>
  </div>

  <div class="window1 content">

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Glazed-Donut.jpg/1200px-Glazed-Donut.jpg">
    <h1>Username</h1>
    <p>yes hello congrats you have made it to my website</p>

    <p>this is currently a wip but for the time being will host all of my stuff and will just be a place where I put anything, software projects, 3d projects - anything I find cool.</p>

    <p>since i'm still learning frontend development this website is going to have a lot of changes</p>

    <p>this is supposed to mimic my desktop (even though mine doesn't look like this so get comfortable and enjoy being in my world)</p>
  </div>

</div>
Tags:

2

Answers


  1. 0

    The below snippet should be what you’re after. I’ve added the following CSS to the .window1.content selector:

      width: 500px;
  height: 370px;
  overflow-y: scroll;

    The CSS above defines the space the window should be and turns on the vertical scrolling of the div.

    I’ve also added some margin-top to the image to ensure you can still see the image in the current layout.

    .window {
  position: absolute;
  z-index: 9;
  background-color: rgba(20, 19, 43, 1);
  text-align: center;
  width: 500px;
  height: 400px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.close-button {
  background: rgba(0, 0, 0, 0.0);
  border: 0px;
  float: right;
  margin-right: -4px;
  margin-top: -1px;
}

.windowheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: rgba(37, 35, 58, 1);
  color: #fff;
  height: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.window1 img {
  margin-top: 10px;
  margin-bottom: 0;
  width: 70%;
  align-self: center;
  padding-top: 150px;
}

.window1.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  width: 500px;
  height: 370px;
  overflow-y: scroll;
}

.content h1,
p {
  font-family: 'SF Pro Display';
  margin-left: 72px;
  margin-top: 2px;
  text-align: left;
  color: rgb(171, 168, 168);
}

.content h1 {
  font-size: 26px;
  font-weight: 600;
}
    <div id="window1" class="window desktop hidden">
  <div class="windowheader">
    <div id="window1-title">LLLJJJIII</div>
    <button class="close-button" onclick="closeTab(2)"> <div id="circle"></div> </button>
  </div>
  <div class="window1 content">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Glazed-Donut.jpg/1200px-Glazed-Donut.jpg">
    <h1>Username</h1>
    <p>yes hello congrats you have made it to my website</p>
    <p>this is currently a wip but for the time being will host all of my stuff and will just be a place where I put anything, software projects, 3d projects - anything I find cool.</p>
    <p>since i'm still learning frontend development this website is going to have a lot of changes</p>
    <p>this is supposed to mimic my desktop (even though mine doesn't look like this so get comfortable and enjoy being in my world)</p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    HTML:

    <div class="window1">
  <div class="content">
    <img src="image.jpg" alt="Image">
  </div>
</div>

    CSS:

    .window1 {
  width: 500px;
  height: 500px;
}

.window1.content {
  overflow-y: auto;
  object-fit: contain;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search