Question

我已经设置了以下布局。 content__item元素（在下面进行注释）在main容器外部垂直溢出。

.root {
  display: flex;
  height: 100vh;
  background-color: gray;
}

.nav {
  width: 16rem;
  background-color: red;
}

.main {
  flex-grow: 1;
  background-color: green;
}

.menu {
  height: 4rem;
  background-color: blue;
}

.content {
  display: flex;
  height: 100%;
  padding: 2rem;
}

.content__item {
  flex: 1;
  margin-left: 1rem;
  background-color: white;
}

<div className="root">
  <nav className="nav"></nav>
  <main className="main">
    <div className="menu"></div>
    <div className="content">
      <!-- Overflowing -->
      <div className="content__item"></div>
      <div className="content__item"></div>
      <div className="content__item"></div>
    </div>
  </main>
</div>

我很确定这是一个flexbox错误。我尝试在容器上使用min-height: 0，但仍然无法正常工作。我设置了一个环境here供参考。

Answer 1

content_items溢出的原因是高度：100％导致flex有问题。但是，如果删除该元素，这些元素似乎不会填充可用的高度。这是因为其父级（content div）不是flex元素的子级，因此实际上是 this 元素，而不是没有使用的content__item升高可用高度。

我们可以通过将display:flex添加到main div（content的父级）中来解决此问题，但是现在我们又遇到了另一个问题！这使得content的另一个子元素（nav元素）出现在侧面。要解决此问题，我们可以使用flex-direction: column;

要使其正常工作，您需要进行的主要更改如下：

.main {
  flex-grow: 1;            /* you already have this to allow the children grow */
  display: flex;           /* Add this so the content element can use the full height */
  flex-direction: column;  /* Add this to make the children stack one below another */
}

.content {
  display: flex;          /* you already had this */
  flex:1;                 /* Add this to make it take up the available height */
}

.content__item {
  flex: 1;                /* You don't actually need this now */
}

工作示例：

仅供参考，您需要将body的边距设置为0-否则100vh的扩展范围大于屏幕，因为它正被添加到默认边距中。

body {  margin:0; }
.root {
  display: flex;
  height: 100vh;
  background-color: gray;
}

.nav {
  width: 16rem;
  background-color: red;
}

.main {
  flex-grow: 1;
  background-color: green;
  display:flex;
  flex-direction:column;
}

.menu {
  height: 4rem;
  background-color: blue;
}

.content {
  display: flex;
  padding: 2rem;
  flex:1;
}

.content__item {
  margin-left: 1rem;
  background-color: white;
}

<div class="root">
  <nav class="nav"></nav>
  <main class="main">
    <div class="menu"></div>
    <div class="content">
      <!-- Overflowing -->
      <div class="content__item">some text here</div>
      <div class="content__item">some text here</div>
      <div class="content__item">some text here</div>
    </div>
  </main>
</div>

Answer 2

body, html {
  margin: 0;
}

.root {
  display: flex;
  height: 100vh;
  background-color: gray;
}

.nav {
  width: 16rem;
  background-color: red;
}

.main {
  flex-grow: 1;
  background-color: green;
  
  display: flex;
  flex-direction: column;
}

.menu {
  height: 4rem;
  background-color: blue;
}

.content {
  display: flex;
  padding: 2rem;
  
    flex: 1;
}

.content__item {
  flex: 1;
  margin-left: 1rem;
  background-color: white;
}

<div class="root">
  <nav class="nav"></nav>
  <main class="main">
    <div class="menu"></div>
    <div class="content">
      <!-- Overflowing -->
      <div class="content__item">a</div>
      <div class="content__item">b</div>
      <div class="content__item">c</div>
    </div>
  </main>
</div>

弹性项目内容溢出容器

2 个答案: