CSS子元素不继承父高度

Question

我想制作某种模式框，以使父框始终小于窗口大小，但子框可以具有任意高度，并且如果其高度大于父框的高度，则应该具有滚动条。

因此，我尝试进行此操作，但子元素不继承父级的高度（尽管子高度设置为100％），并且我无法将overflow-y: auto属性应用于子元素进行滚动。此属性仅适用于父元素，否则子元素与父元素重叠。

如何防止子元素与父元素重叠？

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parent {
  min-width: 200px;
  max-width: 300px;
  min-height: 200px;
  max-height: 80%;
  background-color: red;
  box-sizing: border-box;
  padding: 20px;
  /* overflow-y: auto; */ /* works! */
  
}
.child {
  width: 100%;
  height: 100%; /* assumes parents height */
  background-color: blue;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: hidden; /* doesn't work! */
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
    </div>
  </div>
</div>

Answer 1

删除父级的max-height。谢谢

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parent {
  min-width: 200px;
  max-width: 300px;
  min-height: 200px;
  background-color: red;
  box-sizing: border-box;
  padding: 20px;
  /* overflow-y: auto; */ /* works! */
}
.child {
  width: 100%;
  height: 100%; /* assumes parents height */
  background-color: blue;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: hidden; /* doesn't work! */
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
    </div>
  </div>
</div>

Answer 2

从max-height: 80%;删除.parent