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

您可以尝试：

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 3

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

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

Answer 4

从.content中删除display: flex，从.a .b .c中删除height: 100%，然后将元素包装在div中并赋予其显示弹性。

工作代码：

.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 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>

Flex内容与父内容的高度不符

5 个答案: