将溢出的列缩放到较小的列（bootstrap 或香草 css）

Question

我尝试了几种不同的方法，我很确定没有 JS 是不可能的 - 但在我蜷缩在一个角落之前，我想我会在这里尝试一下。

我在左侧有一个很长的导航 div，旁边是一个包含动态内容的栏。第一个目标是让导航的高度最大与内容相同并溢出其余部分。

document.getElementById('add').addEventListener("click", function(e){
  e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});

.row {
  display: flex;
  align-items: flex-start;
}

.left {
  background: #ccc;
}

.right {
  background: #cc6;
}

<div class="row">
  <div class="left">Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
  <div class="right">Shorter Content...<br>...<br>
    <button id="add">+ add more content</button>
    <br>...<br>...<br>...<br>&lt;-- Navigation div should always end here</div>
</div>

为了让它更有趣一点，整个事情都在模态中。所以我的第二个目标是让它在有 overflow: auto 本身的 div 中工作。

document.getElementById('add').addEventListener("click", function(e){
  e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});

.modal {
  display: flex;
  align-items: flex-start;
  
  max-height: 300px;
  overflow: auto;
  
  margin: 10px;
  border: 10px solid red;
  box-shadow: 0 0 15px grey;
}

.left {
  background: #ccc;
}

.right {
  background: #cc6;
}

<div class="modal">
  <div class="left">Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
  <div class="right">Shorter Content...<br>...<br>
    <button id="add">+ add more content</button>
    <br>...<br>...<br>...<br>&lt;-- Navigation div should always end here</div>
</div>

我尝试了 flexbox、定位以及我能想到的最大高度、高度和最小高度的任意组合，但都没有成功。你知道如何在没有 JS 的情况下实现这个吗？

哦，它必须在 IE11 中工作... :)

Answer 1

做到这一点的唯一方法是绝对定位导航，但您需要给左侧 div 固定宽度

document.getElementById('add').addEventListener("click", function(e) {
  e.target.insertAdjacentHTML('afterend', '<br>more dynamic content...');
});

.modal {
  max-height: 300px;
  overflow: auto;
  margin: 10px;
  border: 10px solid red;
  box-shadow: 0 0 15px grey;
}

.modal-inner {   /* add this div so backgrounds don't stop when they hit max-height of modal */
  display: flex;
}

.left {
  background: #ccc;
  position: relative;  /* add this and give a fixed width */
  width: 200px;
}

.absolute {
  /* add a div with this class inside the left column */
  position: absolute;
  overflow: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.right {
  background: #cc6;
  flex-grow: 1;  /* add this if you want this div to fill the rest of width */
}

<div class="modal">
  <div class="modal-inner">
    <div class="left">
      <div class="absolute">
        Long Navigation<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Cookiemonster</div>
    </div>
    <div class="right">Shorter Content...<br>...<br>
      <button id="add">+ add more content</button>
      <br>...<br>...<br>...<br>&lt;-- Navigation div should always end here</div>
  </div>
</div>

将溢出的列缩放到较小的列（bootstrap 或香草 css）

Scale overflowing column to smaller one (bootstrap or vanilla css)

css

modal-dialog

overflow

flexbox

bootstrap-4