在內容超過div的高度后擴展div的寬度

Question

我最近一直在研究CSS flex，並嘗試用它來完成一些簡單的任務。 其中一項任務是制作一個時間軸，其中交替的元素位於中線之上或之下。

我希望能夠設置初始寬度和固定高度，這樣當內容超過div的高度並溢出時，寬度將擴展以容納內容，並且希望不會溢出。

https://codepen.io/anon/pen/roVOXB

<div class="content">
  <div class="box">
    <div class="above">Content of the div</div>
    <div class="below"></div>
  </div>
  <div class="box">
    <div class="above"></div>
    <div class="below">Content of the div</div>
  </div>
  <div class="box">
    <div class="above">Content of the div</div>
    <div class="below"></div>
  </div>
  <div class="box">
    <div class="above"></div>
    <div class="below">Content of the div</div>
  </div>
  <div class="box">
    <div class="above">Content of the div</div>
    <div class="below"></div>
  </div>
</div>

.content {
  display: flex;
}

.box {
  display: flex;
  flex-direction: column;
}

.above, .below {
  height: 350px;
  display: flex;
  min-width: 300px;
  border: 1px solid #000;
}

.above {
  display: flex;
  align-items: flex-end;
  background: orange;
}

.below {
  display: flex;
  align-items: flex-start;
  background: aqua;
}

我知道這可能是一個簡單的解決方案，它正好盯着我，但我已經嘗試了所有的最大寬度，最大高度，溢出和包裝文本但沒有任何東西可以幫助我達到目前為止所期望的結果。

我真的很感激任何幫助。 謝謝！

Answer 1

您可以使用以下JS動態更改元素：

var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
  if(Ele.scrollHeight > 350){
    Ele.style.minWidth = (Ele.scrollHeight) + "px";
  }
});

什么是迭代所有具有below和above類的元素，然后檢查它是否使用比高度更高的height: 350px ，如果它> 350px ，那么它將相應地調整。

只需在您的codepen JS編輯器中添加上面的JS代碼，就可以了。 嘗試添加更多內容，它將動態更改寬度無溢出。

Answer 2

如果列數是靜態的，則可以從.above, .below刪除min-width 。

添加min-width: 2700px; 到.content 。