Flex项目不会因溢出而收缩-它仍然保持与内容相同的高度

时间：2019-03-18 11:53:46

标签： html css css3 flexbox alignment

我希望display: flex;的一个孩子将身高调整为其他孩子的身高。如果此子级中的内容大于其他子级中的内容，则应对此内容进行overflow: scroll;。

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

我知道这个问题与其他许多问题一样。我已经阅读了很多线程，但仍然无法解决问题。我为这篇文章表示歉意，但我无力解决。

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

4 个答案:

答案 0 :(得分：1)

  

我想要显示的子项之一：flex;调整其他高度。

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

  • 确保您拥有align-items: stretch（它是默认值，所以请不要覆盖它）-这样可以确保每个 row flex child 都可以拉伸到最大flex flex child。
  • 将其他部分（child1和child2）的内容包装到绝对定位元素中。
  • 将此包装器元素设置为 column 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>

答案 1 :(得分：0)

在这种情况下，

溢出意味着没有定义 height ，然后内容应溢出。 flex的问题（在大多数情况下是或优点，）是盒子将增长以匹配“最大”内容，或者说是flex（因此得名）。为此，您可能需要Javascript，或者需要在子级上定义最大高度。

下面是您的代码示例，其中将max-height应用于孩子； 

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

.child1, .child2, .child3{
  max-height: 250px;
  overflow: auto;
}
<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>

答案 2 :(得分：0)

如果您事先知道flex子级的期望高度，则使用max-height属性是Flexbox原生提供的最干净的解决方案，如@Lewis建议。

如果需要更多细粒度的控件，请考虑使用CSS Grid布局模块。如果您将现有代码与下面的代码段交换出去，并将其应用于标记，则可以看到您要实现的布局的极简复制。

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 100px);
}

.parent > * {
  border: 2px solid black; // added for clarity
  grid-row-start: 1;
  grid-row-end: 4;
}

.child2 {
  overflow-y: scroll;
}

答案 3 :(得分：0)

例如，您将.parent设置为高      max-height：150像素；

相关问题
最新问题