Блог

Главная - Вопросы по программированию - Flexbox ограничивает высоту дочерних элементов, если для высоты дочернего элемента установлено значение auto

Flexbox ограничивает высоту дочерних элементов, если для высоты дочернего элемента установлено значение auto

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

У меня есть три подразделения: outer, inner, deeper, где каждое из них является родительским для следующего.

Для «Более глубокого» установлена фиксированная высота, тогда как для «внутреннего» установлено значение auto.

Я ожидал бы, что «внутренняя» высота совпадает с «более глубокой» высотой, но оказывается, что она ограничена «внешней» высотой всякий раз, когда для «внешнего» дисплея установлено значение flex.

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

Почему это происходит?

 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
  overflow-y: auto;
  border: 1px solid gray;
  display: flex;
}

.inner {
  margin: 50px 0;
  background-clip: content-box;
  height: auto;
}

.deeper {
  height: 600px;
  width: 200px;
  background-color: red;
}  
 <div class="outer">
  <div class="inner">
    <div class="deeper"></div>
  </div>
</div>

Ответ №1:

здесь я опубликовал другой код, чтобы лучше показать мой предыдущий вывод. в этом коде вы можете изменить «display: flex» на «display: block», чтобы увидеть эффект в окне проверки.

 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
  border: 1px solid gray;
  display: flex;
  /* the above "display:flex" makes the children of this tag to have the fixed height. */
}

.inner {
  height: auto; /* the height defined here does not affect, you can inspect the tag to see that the height is "400px". */
  background-color: #242;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="outer">
  <div class="inner">
  </div>
</div>

</body>
</html>

Ответ №2:

Я думаю, что то, что вы ожидаете, неверно. смотрите код ниже:

 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.outer {
  height: 400px;
/*  overflow-y: auto;*/
  border: 1px solid gray;
  display: block;
}

.inner {
/*  margin: 50px 0;*/
/*  background-clip: content-box;*/
  height: 500px;
  background-color: #242;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
<div class="outer">
  <div class="inner">
<!--    <div class="deeper"></div>-->
  </div>
</div>
    
</body>
</html>

это очень простой пример. в этом случае я прокомментировал «более глубокий» div. а также прокомментировал свойства «переполнение» и «фоновый клип», потому что я думаю, что они не связаны с вопросом о «высоте».

я хочу сказать, что в этом случае у нас есть «.outer» div с «display: block» и фиксированной «высотой». в этом div у нас есть другой div с «height: 500px», который выше его родительского элемента. вы можете видеть только этот раздел размером 500 пикселей. но если вы «проверите», вы заметите, что высота «.outer» div составляет 400 пикселей. таким образом, мы можем сделать вывод, что

если у нас есть тег с «display: block» и «фиксированной высотой», высота этого тега не изменяется в зависимости от его дочернего элемента.

итак, в случае «вашего вопроса» у нас есть «.inner» div, а его дочерним элементом является «.deeper» div. «.inner» div имеет «display: block» и имеет фиксированную высоту, потому что:

свойство «align-items», которое имеет начальное значение «stretch», делает дочерние элементы div с «display: flex» (то есть «.inner» div) высотой своего родительского элемента (означает, что «.inner» имеет высоту «400 пикселей»)

таким образом, согласно нашему выводу, высота «.inner» не изменяется с высотой «.deeper».

Комментарии:

1. Я думаю, вы упустили суть, вся проблема возникает именно тогда, когда «более глубокая» высота установлена на фиксированное значение, а «внутренняя» — нет (поэтому по умолчанию используется значение auto и должно изменяться в соответствии с его дочерними элементами).

2. да, вы так пишете свой код. но поскольку вы устанавливаете «display: flex» для родительского элемента «.inner» и поскольку начальное значение свойства «align-items» равно «stretch», браузер устанавливает высоту «.outer» на «.inner».