在内容超过div的高度后扩展div的宽度

Question

I have been studying CSS flex recently and was trying out some simple tasks with it. One of these tasks was to make a timeline with alternating elements being above or below a mid-line.

I would like to be able to set an initial width and a fixed height, so that when the content exceeds the height of the div and overflows, the width will expand to accommodate the content, and hopefully there will be no overflow.

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

I know it might be a simple solution and its staring me right in the face, but I have tried everything with max-widths, max-heights, overflows and wrapping the text but nothing can help me achieve the desired outcome so far.

I would really appreciate any help. Thanks!

Answer 1

You can change the elements dynamically using the following JS:

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

What is does it iterate through all the elements with classes below and above , then checks if it uses more height than the height: 350px , if it is > 350px , then it will adjust accordingly.

Just add the above JS code in your codepen JS editor, and you're good to go. Try adding more content to it and it will dynamically change the width w/o overflow.

Answer 2

If the number of columns is static, you can remove the min-width from .above, .below .

Add min-width: 2700px; to .content .