Using CSS, the ability to scroll to the top of a page is restricted when an inner div expands to the top while using flex

While following a tutorial on YouTube, I encountered an issue where my expanding content, when exceeding the size of the window in a small screen view, prevented me from scrolling to the top. Interestingly, I could scroll to the bottom and back up to that point, but not beyond it.

const accordion = document.getElementsByClassName('content-container');

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener('click',
    function() {
      this.classList.toggle('active'); // toggles the class name on or off
    }
  )
}
body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accordion {
  background-color: #fff;
  width: 65%;
  padding: 30px;
  border-radius: 30px;
}

.accordion .accordion-title {
  margin-bottom: 30px;
  text-align: center;
}

.accordion .content-container .question {
  padding: 18px 0px;
  font-size: 22px;
  cursor: pointer;
  border-bottom: 1px solid #000;
  position: relative;
  transition: .5s;
}

.accordion .content-container .question::after {
  content: '+';
  position: absolute;
  right: -5px;
}

.accordion .content-container .answer {
  padding-top: 15px;
  font-size: 22px;
  line-height: 1.5;
  width: 100%;
  height: 0px;
  overflow: hidden;
  transition: .5s;
}


/* JS Styling Link */

.accordion .content-container.active .answer {
  height: 200px;
}

.accordion .content-container.active .question {
  font-size: 18px;
  transition: .5s;
}

.accordion .content-container.active .question::after {
  content: '-';
  font-size: 30px;
  transition: .5s;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion</title>
  <link rel="stylesheet" href="project3.css">
</head>

<body>
  <div class="accordion">
    <h2 class="accordion-title">Frequently Asked Questions</h2>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
  </div>
  <script src="project3.js"></script>
</body>

</html>

As someone new to CSS and HTML, I attempted to use margin: auto; instead of justify-content: center; and align-items: center; in order to resolve the issue, but unfortunately, it didn't work. It seems that the problem arises because flex prioritizes centering content regardless of whether it extends beyond the outer limits.

htmlcssflexbox

Answer №1

By utilizing a combination of 100vh for the body, coupled with applying height: 200px to the .answer element when it's in an active state.

This behavior occurs on smaller browser screens, particularly when each accordion is opened at a screen width less than 600px, attempting to maintain static heights while adhering to body {height: 100vh;}.

A practical solution would involve implementing a media query to address these issues on narrower screens both vertically and horizontally.

const accordion = document.getElementsByClassName('content-container');

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener('click',
    function() {
      this.classList.toggle('active'); // toggles the class name on or off
    }
  )
}
body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accordion {
  background-color: #fff;
  width: 65%;
  padding: 30px;
  border-radius: 30px;
}

.accordion .accordion-title {
  margin-bottom: 30px;
  text-align: center;
}

.accordion .content-container .question {
  padding: 18px 0px;
  font-size: 22px;
  cursor: pointer;
  border-bottom: 1px solid #000;
  position: relative;
  transition: .5s;
}

.accordion .content-container .question::after {
  content: '+';
  position: absolute;
  right: -5px;
}

.accordion .content-container .answer {
  padding-top: 15px;
  font-size: 22px;
  line-height: 1.5;
  width: 100%;
  height: 0px;
  overflow: hidden;
  transition: .5s;
}


/* JS Styling Link */

.accordion .content-container.active .answer {
  height: 200px;
}

.accordion .content-container.active .question {
  font-size: 18px;
  transition: .5s;
}

.accordion .content-container.active .question::after {
  content: '-';
  font-size: 30px;
  transition: .5s;
}

@media only screen and (max-height: 840px) and (max-width: 1000px) {
  body {
    height: auto;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordian</title>
  <link rel="stylesheet" href="project3.css">
</head>

<body>
  <div class="accordion">
    <h2 class="accordion-title">Freqently Asked Questions</h2>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
  </div>
  <script src="project3.js"></script>
</body>

</html>

Answer №2

My Examples:

Keyword Protection from MDN :

safe

If the selected keyword causes data loss by overflowing the alignment container, the item is aligned as if it were at the start of the alignment mode.

const accordion = document.getElementsByClassName('content-container');

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener('click',
    function() {
      this.classList.toggle('active'); // toggles the class name on or off
    }
  )
}
body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: safe center;
  align-items: safe center;
}

.accordion {
  background-color: #fff;
  width: 65%;
  padding: 30px;
  border-radius: 30px;
}

.accordion .accordion-title {
  margin-bottom: 30px;
  text-align: center;
}

.accordion .content-container .question {
  padding: 18px 0px;
  font-size: 22px;
  cursor: pointer;
  border-bottom: 1px solid #000;
  position: relative;
  transition: .5s;
}

.accordion .content-container .question::after {
  content: '+';
  position: absolute;
  right: -5px;
}

.accordion .content-container .answer {
  padding-top: 15px;
  font-size: 22px;
  line-height: 1.5;
  width: 100%;
  height: 0px;
  overflow: hidden;
  transition: .5s;
}


/* JS Styling Link */

.accordion .content-container.active .answer {
  height: 200px;
}

.accordion .content-container.active .question {
  font-size: 18px;
  transition: .5s;
}

.accordion .content-container.active .question::after {
  content: '-';
  font-size: 30px;
  transition: .5s;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion</title>
  <link rel="stylesheet" href="project3.css">
</head>

<body>
  <div class="accordion">
    <h2 class="accordion-title">Frequently Asked Questions</h2>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>

  </div>
  <script src="project3.js"></script>
</body>

</html>

Child Margin:auto Approach:

const accordion = document.getElementsByClassName('content-container');

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener('click',
    function() {
      this.classList.toggle('active'); // toggles the class name on or off
    }
  )
}
body {
  background: url(/projects/images/project-3-image.jpg) no-repeat center center/cover;
  height: 100vh;
  display: flex;
  /*justify-content: center;
  align-items: center;*/
}

.accordion {
  margin:auto;
  background-color: #fff;
  width: 65%;
  padding: 30px;
  border-radius: 30px;
}

.accordion .accordion-title {
  margin-bottom: 30px;
  text-align: center;
}

.accordion .content-container .question {
  padding: 18px 0px;
  font-size: 22px;
  cursor: pointer;
  border-bottom: 1px solid #000;
  position: relative;
  transition: .5s;
}

.accordion .content-container .question::after {
  content: '+';
  position: absolute;
  right: -5px;
}

.accordion .content-container .answer {
  padding-top: 15px;
  font-size: 22px;
  line-height: 1.5;
  width: 100%;
  height: 0px;
  overflow: hidden;
  transition: .5s;
}


/* JS Styling Link */
.accordion .content-container.active .answer {
  height: 200px;
}

.accordion .content-container.active .question {
  font-size: 18px;
  transition: .5s;
}

.accordion .content-container.active .question::after {
  content: '-';
  font-size: 30px;
  transition: .5s;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion</title>
  <link rel="stylesheet" href="project3.css">
</head>

<body>
  <div class="accordion">
    <h2 class="accordion-title">Frequently Asked Questions</h2>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>
    <div class="content-container">
      <div class="question">What is the Return Policy?</div>
      <div class="answer">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, animi! Accusamus temporibus tenetur perferendis delectus asperiores libero cumque repudiandae, nesciunt totam deleniti quis nostrum? Obcaecati minima consequatur incidunt id vero?</div>
    </div>

  </div>
  <script src="project3.js"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Bootstrap v4 in styling and aligning buttons for a polished

With Bootstrap v4 dropping the .btn-group-justified class, a solution can be found at https://github.com/twbs/bootstrap/issues/17631 Here's how to justify the buttons: <div class="btn-group btn-group-justified" role="group" aria-label="Justified ...

cssbootstrap-4twitter-bootstrap-4

Skip nodes in Polymer 1.0 by using ExcludeLocalNames

I recently attempted to transition from Polymer version 0.5 to 1.0 and came across a particular question: Is there a way to exclude certain nodes inside a paper-menu? In the previous version (0.5), you could use the attribute excludedLocalNames to achieve ...

javascripthtmlpolymer

Convert PHP code into an HTML table

Is it possible to insert date values into an HTML table column using the following code? <?php $startdate = strtotime("Monday"); $enddate = strtotime ("+3 weeks", $startdate); while ($startdate < $enddate) { echo date("M d", $startdate),"& ...

phphtml

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

css.htaccess

Redirecting visitors to a specific section of the website as soon as they enter the site

Currently, I am utilizing a jquery plugin known as Ascensor which can be found at this link: This plugin is designed for creating one-page websites with smooth scrolling capabilities both vertically and horizontally. It operates using a coordinate system ...

javascriptjqueryhtmlcss

Searching for a way to sort out role-specific usernames in a dropdown menu using AngularJS?

Is there a way to effectively filter usernames based on specific roles in a dropdown using AngularJS? Hello, I am trying to filter the usernames with the 'KP' role in the dropdown list. Please refer to My plunker for more information. Init ...

htmlangularjsmeanjs

Having trouble deciphering mathematical formulas while editing content on ckeditor

While using math formulas in CKEditor, I noticed that when I insert new content via textarea, the formulas are displayed correctly. However, when I go back to edit the content, the text formulas do not display as before. This is the source code I am using ...

javascriptjqueryhtmlckeditorfckeditor

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...

javascripthtmlcssjson

Optimizing User Addition in Python Using Selenium

Currently, I am developing test cases to populate a new web app account with multiple users simultaneously. Here is the script I am using: driver.find_element_by_css_selector("input.ss-med.small").clear() driver.find_element_by_css_selector("input ...

pythonhtmlselenium

Supported video formats in various web browsers

Are there detailed records of video codec compatibility across various desktop and mobile web browsers? ...

htmlvideohtml5-video

Unable to retrieve the value of an option element within a select tag using Selenium

I am having difficulty in choosing an option from a dropdown menu while using Selenium with Python. Displaying below is the HTML code snippet: <select class="hm-input hm-dropdown" type="text" id="HME-10-widget_calendar_1" ...

pythonhtmlselenium

Rearrange two elements by flipping their positions using CSS

I'm working with the following div that contains an input and a label: <div class="js-form-item "> <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> <label for="option-a-checkboxes-11" class=" ...

htmlcss

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

javascriptjquerycssjquery-collision

The click event is activated following the :active selector being triggered

My Angular application features a button with a slight animation - it moves down by a few pixels when clicked on: &:active { margin: 15px 0 0 0; } The button also has a (click)="myFunction()" event listener attached to it. A common issue arises w ...

javascriptcssangularbuttonclick

I am experiencing difficulties with my bootstrap module not loading

Could you please investigate why my module isn't loading? The module is supposed to load under the specified conditions in the third last column, but when I test the code, it doesn't work. Can you assist me in identifying what might be causing th ...

htmlcss

Tips for evenly distributing these cards

Check out the full code on Codepen.io <div class="card-container"> <div class="card col-lg-4 col-sm-6 col-xs-12"> <div class="side">Jimmy Eat World</div> <div class="side back"><img ...

htmlcssbootstrap-4

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Here is a code snippet that includes buttons appending selections to the "cart" div upon clicking. The first script ensures only one selection per row when multiple buttons in the same row are clicked. In the second script, selections are appended to the ...

javascripthtmljquerycss

Dealing with React Native text overflowing beyond the screen width when using FlexWrap

I'm currently working on implementing a component in react native that consists of a row containing and components, but I'm struggling to achieve the desired outcome. Here's my current code: <View style={{ flexDirection: ...

javascriptreactjsreact-nativeflexbox

numerous inquiries regarding my CSS header navigation bars

As someone who is new to CSS, I find myself struggling to grasp the correct approach. Online examples vary and leave me confused. Specifically, I have questions about my markup but overall, am I doing things correctly? I feel like my CSS code is bloated. ...

htmlcsscss-floatoverflow

What is the best way to implement an if-else structure in this code?

Can anyone help me with converting this code into an if/else statement? I want it to display certain content if 'Rental' is true, and other content if it's false. The PHP tags are making it difficult for me to follow. <?php if( get_ ...

phphtml