Flex 内容不适合父内容的高度

Question

我有以下布局，它是一个包装器（内容），其中包含一些其他 div，这些 div 也具有一些 flex 属性。

从以下链接可以看出，内容中的 div 现在随着内容的大小而放大。

.content {
  width: 100%;
  height: 400px;
  display: flex;
  overflow: auto;
  background-color: blue;
}

.a {
  width: 165px;
  height: 100%;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
  height: 100%;
}

<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

我想要实现的目标： - 红色、黄色、绿色 div 的高度应该与蓝色（内容）div 相同，因此在滚动时您看不到底部的蓝色部分

如何做到这一点？我的代码有什么问题？

我只支持最新的 chrome，我可以使用 CSS3

Answer 1

您的.a 溢出到.content，这就是为什么您会看到底部显示蓝色部分。

通过给.a 或者更确切地说，所有子div 自动溢出，它们将跟随父母的高度并避免内容溢出。

不过，它会引入一个滚动条。如果您对隐藏溢出的文本感到满意，可以改用overflow: hidden。

.content {
  width: 100%;
  height: 400px;
  display: flex;
  overflow: auto;
  background-color: blue;
}

.content > div {
  overflow: auto;
}

.a {
  width: 165px;
  height: 100%;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: yellow;
}

.c {
  width: 165px;
  margin-right: 15px;
  flex-grow: 1;
  background-color: green;
  height: 100%;
}

<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

Answer 2

我认为解决您的问题的最佳选择是

• 将 overflow: auto; 从 .content 类移动到它的子类。
• 如果容器大于 400 像素没有问题，请将 height: 400px; 更改为 min-height: 400px;；
• 在.content 周围添加包装器div 和height: 400px; 和overflow: auto;，并从.content 中删除这两个规则（imo 最佳选择）

Answer 3

从 .content 中删除 display: flex 并从 .a .b .c 中删除 height: 100%，然后将您的元素包装在一个 div 中并给它一个 display flex。

工作代码：

.content {
  width: 100%;
  height: 400px;
  overflow: auto;
  background-color: blue;
}

.inner{
  display: flex;
}

.a {
  width: 165px;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
}

<div class="content">
<div class="inner">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>
  
</div>

Answer 4

你可以试试：

flex: 1 1 auto

它的大小基于宽度/高度属性..

退房 Css Tricks article on it.

编辑

去掉 flex-grow: 1 ，它就是你需要的高度。

.content {


width: 100%;
  height: 400px;
  overflow: auto;
  background-color: blue;
}

.inner{
  display: flex;
}

.a {
  width: 165px;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
}

.c {
  width: 165px;
  margin-right: 15px;
  background-color: green;
}

Answer 5

问题出在此处。部分溢出。当您绑定 .content 400px 高度时。所以有两种方法，您可以摆脱它们来绑定高度或使用溢出滚动 .a 部分。您可以在下面比较以前的和固定的代码。

.content {
  width: 100%;
  /*height: 400px;*/
  display: flex;
  overflow: auto;
  background-color: blue;
}

.a {
  width: 165px;
  /*height: 100%;*/
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
  /*height: 100%;*/
  box-sizing: border-box;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
  /*height: 100%;*/
}

<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>

.content {
  width: 100%;
  height: 400px;
  display: flex;
  overflow: auto;
  background-color: blue;
}

.a {
  width: 165px;
  height: 100%;
  flex-grow: 1;
  background-color: red;
}

.b {
  width: 65px;
  display: flex;
  padding-top: 20px;
  padding-bottom: 20px;
  justify-content: center;
  background-color: yellow;
  height: 100%;
}

.c {
  width: 165px;
  flex-grow: 1;
  margin-right: 15px;
  background-color: green;
  height: 100%;
}

<div class="content">
  <div class="a">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
    a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
    containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="b">
    <div class="separator">
      s
    </div>
  </div>
  <div class="c">
    c
  </div>
</div>