时间戳

首页 > 解决方案 > 使第二个子元素符合父高度且不重叠

html - 使第二个子元素符合父高度且不重叠

问题描述

我有第二个子元素section.nested超过父 div 高度的问题。我已经尝试过，但无法使其符合父母的div任何想法？

html,body,main {
  height: 100%
}
main {
   display: flex;
   flex-direction: column;
}

main > section {
    min-width: 31%;
    max-width: 74%;
    max-height: 74%;
    padding: 1.27rem;
    background-color: #575757;
}

main > section > div {
  height: 100%;
  max-height: 100%;
}

main section.nested {
  padding: 1rem;
  background-color: #ccc;
}

article {
  height: 600px;
  background-color: #eee
}
<main>
  <section>
    <div>
      <header>
        <h3>heading</h3>
        <p>Some text</p>
      </header>
      <section class="nested">
        <div>
          <article></article>
        </div>
      </section>
    </div>  
  <section>
</main>

我有兴趣只是section.nested遵守而不给出明确px的高度，其余的溢出无关紧要

标签： htmlcssflexbox

解决方案

删除 最大高度：74%；主要 > 部分的属性 

html,body,main {
  height: 100%
}
main {
   display: flex;
   flex-direction: column;
}

main > section {
    min-width: 31%;
    max-width: 74%;
    padding: 1.27rem;
    background-color: #575757;
}

main > section div {
  height: 100%;
  max-height: 100%;
}

main section.nested {
  padding: 1rem;
  background-color: #ccc;
}

article {
  height: 600px;
  background-color: #eee
}
<main>
  <section>
    <div>
      <header>
        <h3>heading</h3>
        <p>Some text</p>
      </header>
      <section class="nested">
        <div>
          <article></article>
        </div>
      </section>
    </div>  
  <section>
</main>

推荐阅读