盡管有拉伸，Flex中的Div并沒有占據Flex的全部高度

我想創建類似的東西：

我正在使用 flexbox 將藍色矩形定位在左側，將文本定位在右側。

文本將是動態的，因此如果容器更長，它可能會擴大容器的高度。因此，我不想硬編碼高度。

我正在使用下面的代碼，依賴于文本將擴展容器的高度這一事實，因此當我呼叫height: 100%藍色矩形元素時，它應該出現在左側，跨越父級的整個高度，但它沒有不。

.container {
  display: flex;
  width: 200px;
  border-style: solid;
  align-content: stretch;
}

.leftRectangle {
  background-color: blue;
  width: 20px;
  height: 100%;
}

.rightRectangle {
  padding: 12px;
}

<div class='container'>
  <div class='leftRectangle'></div>
  <div class='textContent'>Hello World</div>
 </div>

為什么它會以這種方式運行，潛在的解決方法是什么？

uj5u.com熱心網友回復：

在這里我給你一個解決方案，雖然我不知道你是否想讓藍條滾動，讓我知道，我也會解釋如何滾動

并在左側的 Rectangle 類中從 CSS 中移除 height 屬性并添加包含該段落的 textContent 類，輸入屬性和高度值 100%，使文本不會溢位容器外

<div class="container">
      <div class="leftRectangle"></div>
      <div class="textContent">
        <p>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It
          has roots in a piece of classical Latin literature from 45 BC, making
          it over 2000 years old. Richard McClintock, a Latin professor at
          Hampden-Sydney College in Virginia, looked up one of the more obscure
          Latin words, consectetur, from a Lorem Ipsum passage, and going
          through the cites of the word in classical literature, discovered the
          undoubtable source. Lorem Ipsum comes from sections 1.10.32 and
          1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and
          Evil) by Cicero, written in 45 BC. This book is a treatise on the
          theory of ethics, very popular during the Renaissance. The first line
          of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
          section 1.10.32. The standard chunk of Lorem Ipsum used since the
          1500s is reproduced below for those interested. Sections 1.10.32 and
          1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also
          reproduced in their exact original form, accompanied by English
          versions from the 1914 translation by H. Rackham.
        </p>
      </div>
    </div>

和 CSS

.container {
  display: flex;
  width: 200px;
  border-style: solid;
}

.leftRectangle {
  background-color: blue;
  width: 20px;
}

.textContent {
  width: 100%;
}

.rightRectangle {
  padding: 12px;
}

uj5u.com熱心網友回復：

問題是，如果父母沒有高度而孩子有高度：100%，那么孩子將不知道要設定哪個高度。這是一些解決方法：

.container {
  display: flex;
  width: 200px;
  border-style: solid;
  align-content: stretch;

  position:relative;
}

.leftRectangle {
  background-color: blue;
  width: 20px;
  height: 100%;

  position: absolute;
}

.rightRectangle {
  padding: 12px;
}

.textContent {
  padding-left: 20px;
}

<div class='container'>
  <div class='leftRectangle'></div>
  <div class='textContent'>Hello World</div>
 </div>

uj5u.com熱心網友回復：

使用 flexbox 設計更簡單一些。

 * { box-sizing: border-box; }
 .row {
    display: flex;
    width: 15rem;      /* */
    gap: 0.25rem;    margin: 0.25rem;
    flex-wrap: wrap;
    border: 1px solid black;
    background-color: #ddd; 
 }
/* alternate flex setting combinations:  1; 3; 13; etc.
   could also be replaced with width: 10% to 100% OR 10rem to xxrem  OR 10vw to 33vw
*/
 .left {      flex: 1;  background-color: blue; }
 .rite {     flex: 39;  padding: 0.25rem; } 

  <div class="row">
    <div class="left">&nbsp;</div>
    <div class="rite">Hello World.  Text can be of any length over several lines.</div>
  </div>

  <div class="row">
    <div class="left">&nbsp;</div>
    <div class="rite">There can be several on the page.</div>
  </div>

我錯過了您原始設計中“X”的用途。它應該是某種“模態”元素嗎？

標籤：css 弹性盒

上一篇：根據內容顯示/隱藏兄弟div

下一篇：帶有百分比值的svgstroke-dashoffset影片