时间戳

首页 > 解决方案 > Flex 项目不会因溢出而缩小 - 它仍然与内容一样高

html - Flex 项目不会因溢出而缩小 - 它仍然与内容一样高

问题描述

我希望其中一个孩子display: flex;将高度调整为其他孩子。如果这个孩子的内容比其他孩子的大，那么overflow: scroll;应该对这个内容进行处理。

换句话说： 我希望以下代码中的中间 div（黄色背景）将其高度调整为其他 div 的溢出.tabl。

我知道这个问题和许多其他问题一样。我已经阅读了很多线程，但我仍然没有设法解决问题。我为这篇文章道歉，但我没有能力解决它。

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: scroll;
}
<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>
  
  <div class="child2">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>

标签： htmlcssflexboxalignment

解决方案

我想要显示器的一个孩子：flex; 调整高度到其他人。

假设您希望绿色部分( child3) 具有最大高度：

  • 确保你有align-items: stretch（它是默认的，所以不要覆盖它）——这可以确保每一行 flex 子元素伸展到最大高度 flex 子元素。
  • 将其他部分 (child1和child2) 的内容包装到绝对定位的元素中。
  • 将此包装器元素设置为列 flexbox以在黄色部分正确溢出。

请参阅下面的演示：

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
<div class="parent">
  <div class="child1">
  <div class="child-wrap">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p></div>
  </div>
  
  <div class="child2">
  <div class="child-wrap">
    <div class="info">
      <h2>Element</h2>
    </div>
    <div class="tabl">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
    </div>
    <div class="footer">
      <button class="btn">Some button</button>
    </div>
    </div>
  </div>
  
  <div class="child3">
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
      <p>Some element one</p>
      <p>Some element two</p>
      <p>Some element three</p>
      <p>Some element four</p>
  </div>
</div>

假设您希望左侧或右侧部分具有最大高度 - 在这种情况下，仅对中间黄色元素使用上述绝对定位- 请参见下面的演示，其中左侧或右侧元素中的最高元素定义了整个包装的高度：parent 

.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /*align-items: baseline;*/
}

.child1 {
  background-color: red;
  align-self: stretch;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 {
  background-color: yellow;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  margin: 0 15px;
  width: calc(50% - 30px);
  max-width: calc(50% - 30px);
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.child3 {
  background-color: green;
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.child2 .tabl {
  flex-shrink: 1;
  min-height: 0;
  overflow: auto; /* changed to auto */
}

.child1, .child2, .child3 { /* ADDED */
  position: relative;
}

.child-wrap { /* ADDED */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
<div class="parent">
  <div class="child1">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
    <p>Some element two</p>
    <p>Some element three</p>
    <p>Some element four</p>
  </div>

  <div class="child2">
    <div class="child-wrap">
      <div class="info">
        <h2>Element</h2>
      </div>
      <div class="tabl">
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
        <p>Some element one</p>
        <p>Some element two</p>
        <p>Some element three</p>
        <p>Some element four</p>
      </div>
      <div class="footer">
        <button class="btn">Some button</button>
      </div>
    </div>
  </div>

  <div class="child3">
    <p>Some element one</p>
    <p>Some element two</p>
    <p>Some element three</p>

  </div>
</div>

推荐阅读