Уменьшить переполненный столбец до меньшего (начальная загрузка или ванильный CSS) - PullRequest
Новая
       31

Уменьшить переполненный столбец до меньшего (начальная загрузка или ванильный CSS)

0 голосов
/ 04 октября 2018

Я пробовал несколько разных подходов, и я почти уверен, что без 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>

Чтобы сделать его немного более интересным, все это в модале.Поэтому моя вторая цель - заставить его работать в div с переполнением: само auto. 

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 ... :)

1 Ответ

0 голосов
/ 04 октября 2018

Единственный способ сделать это - расположить навигацию абсолютно, но вам нужно задать левому элементу 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>
...