Question

我在侧栏内有一个按钮，如果单击该按钮，它将显示一些文本，但是我注意到文本溢出了原始容器div：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  background-color:red;
}

.main-column {
  margin-left: 8vw;
  background-color:blue;
}

.side-column {
  margin: 4vw auto;
  align-content: flex-start;
  width: 20vw;
  height: auto;
  background-color:purple;
}

.about-author-text {
  font-family: "Merriweather";
  font-weight: lighter;
  font-size: 0;
  padding: 0;
  line-height: 2;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  height: 0;
  flex-flow: wrap;
  visibility: hidden;
  transition: font-size 0.5s ease-in-out;
  color: var(--light-text-color);
}

.visible {
  visibility: visible;
  max-height: auto;
  width: inherit;
  line-height: 2;
  font-size: 0.9em;
  padding: 0;
}

当文本可见时，如何使.columns div（红色背景）扩展其高度？

Answer 1

我已经为您更改了CSS类

True

我已经删除了height属性。

Answer 2

尝试删除在类height: 0上设置的.about-author-text。将容器的高度设置为0并没有任何意义。

Answer 3

从height类中删除.about-author-text属性。

const text = document.getElementById("about-text")

function showText() {
 text.classList.toggle("visible")
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  background-color:red;
}

.main-column {
  margin-left: 8vw;
  background-color:blue;
}

.side-column {
  margin: 4vw auto;
  align-content: flex-start;
  width: 20vw;
  height: auto;
  background-color:purple;
}

.about-author-text {
  font-family: "Merriweather";
  font-weight: lighter;
  font-size: 0;
  padding: 0;
  line-height: 2;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  flex-flow: wrap;
  visibility: hidden;
  transition: font-size 0.5s ease-in-out;
  color: var(--light-text-color);
}

.visible {
  visibility: visible;
  max-height: auto;
  width: inherit;
  line-height: 2;
  font-size: 0.9em;
  padding: 0;
}

.about-author-text p:first-child {
  margin-top: 0;
}

<div class="container">
<div class="main-column">
helllo
</div>
<div class="side-column">
<button onclick="showText()">
About
</button>
<div id="about-text" class="about-author-text">
             <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor nec libero sit amet gravida. Maecenas blandit pulvinar nulla, et porta purus ultrices vel. Curabitur vestibulum accumsan nulla, a ullamcorper arcu tempor molestie. Nulla vitae sollicitudin sem. Suspendisse hendrerit, purus sed congue fringilla, ex mauris porta metus, imperdiet congue elit dolor et mauris. Aliquam ut turpis pretium, feugiat libero nec, finibus mi. Sed ac sagittis tortor. Cras quis tellus vel ligula vehicula tristique in ac erat. Donec mollis hendrerit elit, vel tempor nulla ornare sed.

Nullam at congue ex. Etiam velit libero, dictum in tristique non, pulvinar non orci. Nam nibh diam, porttitor et bibendum at, molestie ut metus. Praesent congue tellus sit amet elit venenatis feugiat. Nam vitae erat elit. Integer fermentum magna ut tempus accumsan. Cras vitae tortor vehicula, bibendum nulla sit amet, dignissim massa. Nunc a lorem egestas, fermentum purus in, lacinia odio. Etiam scelerisque risus sit amet magna consequat, pharetra scelerisque elit egestas. Pellentesque vitae blandit lectus, at rhoncus libero. Vivamus hendrerit tellus dolor, facilisis fringilla lorem viverra non. Integer eros est, luctus ut orci id, rutrum porta risus. Nam sollicitudin tempor nunc ut mollis. 
             </p>
            </div>
</div>
</div>

如何通过更改子div来调整容器div的大小？

3 个答案: