Nano Hash - криптовалюты, майнинг, программирование

Как установить высоту гибкого элемента на ту же высоту, что и у его брата

Я пытаюсь установить высоту содержимого красного гибкого элемента на высоту синего гибкого элемента, когда высота синего гибкого элемента больше.

Для работы полосы прокрутки необходимо установить высоту. Как установить такую ​​же высоту, как у синего гибкого элемента?

Я хочу, чтобы высота красного гибкого элемента составляла 100% страницы. Ближайший результат, который я могу получить, - это установить высоту div внутри красного гибкого элемента на 100vh.

Когда содержимое синего гибкого элемента меньше красного гибкого элемента, у меня есть желаемый результат, но когда содержимое синего гибкого элемента больше, возникает проблема.

Кажется очевидным ответом является установка высоты контейнера родительского класса, но она должна быть 100%, чтобы синий гибкий элемент мог расти.

.container {
  display: flex;
  border: 1px solid gray;
}

.menu {
  border: 1px solid red;
  flex-grow: 1;
}

.menu-content {
  width: 200px;
  height: 100vh;
  overflow-y: auto;
}

.content {
  border: 1px solid blue;
  align-self: flex-start;
  height: 100%;
  overflow: hidden;
}

https://jsfiddle.net/mattdtomo/zqsxwn59/

16.11.2019

Ответы:


1

Вы можете рассмотреть min-height:100vh в элементе меню, чтобы убедиться, что он будет покрывать высоту экрана и может расти вместе с синим содержимым. Затем используйте height:0;min-height:100%; для его содержимого, чтобы оно могло поместиться без переполнения:

.container {
  display: flex;
}

.menu {
  border: 1px solid red;
  min-height: 100vh;
  width: 200px;
}

.menu-content {
  overflow-y: auto;
  height:0;
  min-height:100%;
}

.content {
  border: 1px solid blue;
  align-self: flex-start;
}

body {
  margin:0;
}
* {
  box-sizing:border-box;
}
<div class="container">
  <div class="menu">
    <div class="menu-content">
      Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu ContentMenu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu ContentMenu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content Menu Content 
    </div>
  </div>
  <div class="content">
  Stretch Content Stretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content ch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Contentch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content ch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch ContentStretch Content
  </div>
</div>

16.11.2019
  • Это именно то, что я искал. Спасибо! Никогда бы не подумал установить высоту на 0. Это похоже на хитрость. Как вы узнали об этом? 16.11.2019
  • @Matt Я уже использовал этот трюк до stackoverflow.com/a/58488563/8620333. Он был вдохновлен предыдущим трюком, который я также использовал: stackoverflow.com/a/55041133/8620333 .. ну, сделав много CSS мы обнаруживаем уловки;) 17.11.2019
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..