Question

Alright so this is the third time I've looked for help on a particular element I'm working on in an app so I apologize for the repetition.

I'm building a questionnaire for an application and I want all the questions to be contained in a div and the overflow hidden. The problem I'm currently running into is if the height doesn't exceed 80% of the window size the containing div doesn't collapse into itself and there is an unnecessary amount of whitespace left over.

I have tried to switch the questionnaire-box height style to max-height but this caused the overflow content of the .questions div to be hidden instead of scrollable.

I have a strong suspicion I may need to handle this with js but I prefer straight CSS and HTML if possible.

Anyone have any suggestions?

html, body {
  height: 100%;
 }

.questionnaire-container {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, .1);
}

.questionnaire-box {
  position: relative;
  width: 80%;
  height: 70%;
  margin: 0 auto;
  background-color: #ffffff;
  overflow: hidden;
 }

.questions {
  height: 100%;
  padding: 1rem 2rem;
  overflow-y: auto;
}

<div class="questionnaire-container">
  <div class="questionnaire-box">
    <div class="questions">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</div>

Answer 1

您必须将填充从.questions移至.questionnaire-box。另外，.questions不再设置(...-)width个属性，但.questionnaire-box的{{1}}为max-width。

小提琴：https://jsfiddle.net/moor131j/2/

Div with height % not collapsing into itself with overflow auto

1 个答案: