Высота вложенных элементов и переполнение

Question

Предположим, у меня есть контейнер фиксированного размера, и я хочу, чтобы все элементы помещались внутрь, но я не знаю всех высот внутренних элементов.У некоторых элементов много текста, поэтому я установил overflow: hidden.Но этот элемент игнорирует высоту контейнера и просто растягивается, чтобы соответствовать содержимому.Как мне сделать это правильно?

Редактировать: если я установлю переполнение для своего контейнера, переполненный текст будет скрыт, но нижний отступ будет игнорироваться (см. 2-й фрагмент).Как вырезать текст на 5 пикселей от нижней границы, чтобы все стороны выглядели одинаково?

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

.outer {
  width: 200px;
  height: 200px;
}

.inner {
  padding: 5px;
  overflow: hidden;
  background-color: #ccc;
  height: 150px;
  border: 1px solid black;
}

.text {
  overflow: hidden;
}

<div class="outer">
  <div class="inner">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  <div>Some other text</div>
</div>

Answer 1

Вы можете вложить дополнительный div в .inner (я использовал .inner2 в этом примере, вы можете придумать более значимое имя! :)).

По сути, вам нужно отделитьфон / граница из контейнера, который будет контролировать переполнение (как вы правы, переполнение переходит к краю элемента, его не волнует заполнение).

Просто пример, но я добавилвторой div (.inner2) внутри .inner и вместо этого переместил правила height и overflow к этому.Фон / отступы / границы остаются на месте.

Редактировать: Добавлена ​​граница извести для inner2, чтобы лучше проиллюстрировать происходящее.

.outer {
  width: 200px;
  height: 200px;

}

.inner {
  padding: 5px;
  background-color: #ccc;
  border: 1px solid black;
}
.inner2 {
    height: 150px;
    overflow: hidden;
    border: 1px solid lime;
}

.text {
  
}

<div class="outer">
  <div class="inner">
  <div class="inner2">
    <span style="color: red">Some element so we can't make text 100% height</span>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
  </div>
  </div>
  <div>Some other text</div>
</div>