Как соотносить высоту внутреннего прокручиваемого контейнера с высотой внешнего контейнера? - PullRequest
Новая
       49

Как соотносить высоту внутреннего прокручиваемого контейнера с высотой внешнего контейнера?

2 голосов
/ 18 мая 2019

Во-первых, я попытался это упростить в браузере https://codesandbox.io/s/competent-bassi-yjtoj, и он работает как положено.

В моем проекте я использую Electron, React, MUI и простой CSS. Я не знаю, что из этого вызывает проблему. Возможно, просто код CSS / Flexbox неверен?

Видео, демонстрирующее проблему: https://youtu.be/ym9Bhgexycs

Обратите внимание, что после того, как вы попытаетесь прокрутить до «дна» во внутреннем контейнере, вам необходимо продолжить прокрутку, которая переходит в основной контейнер; который затем прокручивается до дна внешнего контейнера, чтобы увидеть дно внутреннего контейнера.

Я пробовал несколько комбинаций. Отключил переполнение внешних контейнеров и установил его на hidden и использовал auto для внутреннего контейнера. Что, как я считаю, обычно правильно, потому что я хочу именно такое поведение, чтобы прокручивать только внутренний контейнер. В этом случае внутренний контейнер обрезается, и я не могу прокрутить внутренний контейнер до дна. Полоса прокрутки просто исчезает, потому что я прокручиваю в невидимой области.

Внешний контейнер имеет правильную высоту и не переполняет строку состояния / нижний колонтитул.

Внешний контейнер

Внутренний контейнер явно переполняет строку состояния.

Внутренний контейнер

Я также отключил все связанные с окном опции в Electron в других попытках, но проблема остается.

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

Глобал 

const styles = () => ({
  '@global': {
    'html,body': {
      height: '100%',
      margin: 0
    },
    '*': { minHeight: 0 }, // Seems to have no effect.
    '#parcel-root': { // Probably not needed.
      height: '100%',
      margin: 0
    }
  }
})

Компонент 

  container: {
    height: '100%',
    width: '100% !important',
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,  // Suggested by Felix here but had no effect.
  },
  content: {
    flex: 1,
    overflow: 'auto',
  },
  subContainer: {
    height: '100%',
    width: '50%',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: 'blue'
  },
  subContent: {
    flex: 1,
    overflow: 'auto',
    backgroundColor: 'grey'
  },

<div className={classes.container}>
    <div name="TITLE">TITLE</div>
    <div name="CONTENT" className={classes.content}>
        SUB TITLE
        <div className={classes.subContainer}>
            <div className={classes.subContent}>
                -----   MY SCROLLABLE SUB COMPONENT DATA  ----
            </div>
        </div>
    </div>
    <div name="FOOTER">FOOTER</div>
</div>

Все используемые зависимости являются новейшими выпусками.

Заранее спасибо за ваше время.

EDIT

Единственный обходной путь, который я нашел, использует:

height: calc(100vh - 35px)

применяется к subContainer, но я понятия не имею, откуда берутся эти 35px. Я удалил отступы всех элементов. Я хотел бы найти реальное решение, которое не основано на фиксированном размере пикселя ... или хотя бы понять, что на самом деле вызывает эту проблему.

1 Ответ

0 голосов
/ 18 мая 2019

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

html,
body {
  height: 100%; /* needed for proper layout */
}

body {
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title {
  flex: 0 0 auto;
}

.content {
  flex: 1 1 auto;
  position: relative;
  /* need this to position inner content */
  overflow-y: auto;
  background-color: grey;
}

.footer {
  flex: 0 0 auto;
}
<div class=container>
  <div class="title" name="TITLE">TITLE</div>
  <div name="CONTENT" class=content>
    SUB TITLE
    <div class=subContainer>
      <div class=subContent>
        ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT
        DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE
        SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ----
        ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB
        COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- -----
        MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT
        DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ---- ----- MY SCROLLABLE SUB COMPONENT DATA ----
      </div>
    </div>
  </div>
  <div class="footer" name="FOOTER">FOOTER</div>
</div>
...