Question

我想知道为什么clm1的身高：100％;在使用display flex时不会调整div的大小。

如何解决这个问题，我需要将div调整大小为clm2内容吗？为什么我的版本不起作用？

我需要橙色div来匹配蓝色div的大小。

＆＃13;

#container {
  background-color: red;
  width: 500px;
  height: 400px;
}

#flex {
  background-color: yellow;
  display: flex;
  flex-direction: row;
}

#clm1 {
  background-color: orange;
  width: 20%;
  height: 100%;
}

#clm2 {
  background-color: blue;
  width: 80%;
}

＆＃13;

<div id="container">
  <div id="flex">
    <div id="clm1">
      1
    </div>
    <div id="clm2">

      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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
    </div>
  </div>
</div>

＆＃13;

Answer 1

因为未设置父级高度。将height:100%（或任何高度）添加到父级，它将起作用。

#container {
  background-color: red;
  width: 500px;
  height: 400px;
}

#flex {
  background-color: yellow;
  display: flex;
  flex-direction: row;
  height: 100%;
}

#clm1 {
  background-color: orange;
  width: 20%;
  height: 100%;
}

#clm2 {
  background-color: blue;
  width: 80%;
}

<div id="container">
  <div id="flex">
    <div id="clm1">
      1
    </div>
    <div id="clm2">

      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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
    </div>
  </div>
</div>

或者简单地从子项中移除height:100%，因为flex的默认行为会将其拉伸到父级。这是由于默认情况下属性align-items设置为stretch。

#container {
  background-color: red;
  width: 500px;
  height: 400px;
}

#flex {
  background-color: yellow;
  display: flex;
  flex-direction: row;
}

#clm1 {
  background-color: orange;
  width: 20%;
}

#clm2 {
  background-color: blue;
  width: 80%;
}

<div id="container">
  <div id="flex">
    <div id="clm1">
      1
    </div>
    <div id="clm2">

      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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
    </div>
  </div>
</div>

Answer 2

＆＃39;因为你的＃clm2是... #flex的100％高度，它是自动高度，而不是具有定义的400px的#container。

所以将#flex设置为高度100％（或400px），它将起作用

＆＃13;

#container {
  background-color: red;
  width: 500px;
  height: 400px;
}

#flex {
  background-color: yellow;
  display: flex;
  flex-direction: row;
  height:100%;
}

#clm1 {
  background-color: orange;
  width: 20%;
  height: 100%;
}

#clm2 {
  background-color: blue;
  width: 80%;
}

＆＃13;

<div id="container">
  <div id="flex">
    <div id="clm1">
      1
    </div>
    <div id="clm2">

      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. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum
    </div>
  </div>
</div>

＆＃13;

Answer 3

你在div flex中有clm1和clm2，你将c1lm1设置为高度100％clm2到高度80％。由于高度属性填充在父级中，因此总高度将为180％，这是不可能的。尝试使clm1和clm2高度百分比加起来达到100％

为什么不能调整高度：100％;一个弹性项目？

3 个答案: