特定子項的Flex框跳過高度計算-有解無憂

我有一個包含（黑色邊框）幾個子 div（綠色、藍色、紅色）的 flex 框 div。孩子的高度由他們的內容定義。通常，父母的身高是最大孩子的身高。在我的用例中，我需要能夠跳過一些孩子（綠色）來計算父母的身高并減少這些孩子的身高溢位。與示例相反，我不想為高度設定固定值。

特定子項的 Flex 框跳過高度計算

.a {
  display: flex;
  border: 1px solid black;
}

.a2 {
  display: flex;
  max-height: 250px;
  border: 1px solid black;
}

.b {
  height: 300px;
  width: 50px;
  border: 1px solid green;
  background-color: green;
}

.c {
  height: 200px;
  width: 50px;
  border: 1px solid blue;
  background-color: blue;
}

.d {
  height: 250px;
  width: 50px;
  border: 1px solid red;
  background-color: red;
}

is situation:
<div class="a">
  <div class="b">
  </div>
  <div class="c">
  </div>
  <div class="d">
  </div>
</div>
target situation:
<div class="a2">
  <div class="b">
  </div>
  <div class="c">
  </div>
  <div class="d">
  </div>
</div>

js小提琴

uj5u.com熱心網友回復：

使用負底邊距來做到這一點：

.a {
  display: flex;
  border: 1px solid black;
}

.b {
  height: 300px;
  width: 50px;
  border: 1px solid green;
  background-color: green;
  margin-bottom:-300px; /* a big value here */
}

.c {
  height: 200px;
  width: 50px;
  border: 1px solid blue;
  background-color: blue;
}

.d {
  height: 250px;
  width: 50px;
  border: 1px solid red;
  background-color: red;
}

<div class="a">
  <div class="b">
  </div>
  <div class="c">
  </div>
  <div class="d">
  </div>
</div>

uj5u.com熱心網友回復：

您希望 flexbox “忽略”的孩子可以設定為relative沒有高度的定位容器，并在其中放置一個absolute定位元素。由于位置為absolute，黑色方塊將忽略其溢位。

.a {
  display: flex;
  border: 1px solid black;
  overflow: hidden;
}

.a2 {
  display: flex;
  max-height: 250px;
  border: 1px solid black;
}

.b {
  width: 50px;
  position: relative;
}

.b .b-child {
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  position: absolute;
  border: 1px solid green;
  background-color: green;
}

.c {
  height: 200px;
  width: 50px;
  border: 1px solid blue;
  background-color: blue;
}

.d {
  height: 250px;
  width: 50px;
  border: 1px solid red;
  background-color: red;
}

<div class="a">
  <div class="b">
    <!--The one you want to "ignore" -->
    <div class="b-child"></div>
    <!--The absolutely positioned child -->
  </div>
  <div class="c">
  </div>
  <div class="d">
  </div>
</div>

JS小提琴

然后添加overflow: hidden到主容器中，這樣綠線就不會溢位。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322072.html

標籤：html css 弹性盒

上一篇：SQL-比較具有相似主鍵約束的2條記錄

下一篇：僅首先改變高度ulli