высота вложенной флексбокса против максимальной высоты - PullRequest
Новая
       6

высота вложенной флексбокса против максимальной высоты

1 голос
/ 13 марта 2019

обновление : я вижу это странное поведение в Chrome 72. FireFox 64 в порядке!

У меня проблема с вложенным флексбоксом.

В следующем фрагментеЯ добавил фиктивную высоту XL к .root.container, чтобы получить именно тот результат, который мне нужен, когда множество элементов переполняют доступную максимальную высоту.

И наоборот, когда естьнесколько предметов , .root.container не должны распространяться на всю доступную высоту.

Другими словами, я хочу, чтобы .root.container высота была auto, но я не могу понять, как.
При удалении фиктивной высоты переполнение вызывается на .root.content вместо .sub.content.

Пожалуйста, помогите мне понять, как работает flexbox в данной конкретной ситуации.

PS fiddleтакже доступно здесь 

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-height: 100%;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
  height: 999999px; /* i want height to be 'auto' */
}

.sub.container {
  background-color: purple;
  height: 100%;
}

.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}
<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 13 марта 2019

Ваш код работает должным образом при установке большой высоты, потому что max-height:100% в дочернем элементе нуждается в ссылке , если вы удалите высоту, max-height не сможет автоматически работать.Как примечание, Firefox будет иметь тот же вывод, даже если вы удалите max-height, поэтому проблема не связана с max-height. 1

Вместо этого вы можете сохранить каскадный гибкий контейнер и использовать выравнивание по умолчанию для растяжения, чтобы получить то, что вы хотите: 

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-height: 100%;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
}

.sub.container {
  background-color: purple;
  width:100%; /*added this*/
}

.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
  display:flex; /*added this*/
}

.sub.content {
  background-color: orange;
}
<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Чтобы лучше увидеть проблему, давайте удалим некоторые свойства и оставим только те, которые будут вызывать другое поведение: 

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
}

.sub.container {
  background-color: purple;
  height: 100%;
}


.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}
<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Вся проблема связана с внутренним height:100%, используемым на .sub.container.Технически и учитывая спецификацию, эта высота не должна составлять auto, потому что родительская высота не установлена, НО Firefox, кажется, способен оценить эту высоту.Вероятно, из-за вложенного гибкого контейнера, в котором мы можем оценить высоту родительского элемента, прежде чем узнать содержимое, или просто указать ошибку.

Chrome не делает этого и просто игнорирует высоту, что является логическим поведением.

0 голосов
/ 13 марта 2019

Может быть height: fit-content это то, что вы ищете? Я немного запутался в желаемом результате. 

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

div {
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  max-height: 100%;
  overflow: auto;
}

.root.container {
  background-color: red;
  max-height: 100%;
  height: fit-content;
}

.sub.container {
  background-color: purple;
  height: 100%;
}

.root.header {
  background-color: lightblue;
}

.sub.header {
  background-color: lightgreen;
}

.root.content {
  background-color: yellow;
}

.sub.content {
  background-color: orange;
}
<div class="root container">
  <div class="root header">header</div>
  <div class="root content">
    <div class="sub container">
      <div class="sub header">menu</div>
      <div class="sub content">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...