хотя 2-й имеет лучшую поддержку браузеров, так как могут быть более старые браузеры, все еще поддерживают Flexbox, который может не работать.
я есть<img>
с панелью справа, содержащей заголовок элемента управления и длинный список элементов. Итак, у меня есть ситуация с вложенным flexbox:
.container (flex)
-> .child img
-> .child controls panel (flex)
-> .controls
-> .content-wrapper scrolling list
На самом базовом уровне две боковые панели легки, будучи простымalign-items: stretch
..https://codepen.io/neekfenwick/pen/MOxYxz
На этом базовом уровне это дублирующий вопросКак мне сохранить два элемента div, расположенных бок о бок, одинаковой высоты?.
Как только панель справа становится более сложной с вертикально прокручивающимся списком, я не могу понять, как сделать высоту своего родителя вторым.child
, соответствовать высоте первого.child
. https://codepen.io/neekfenwick/pen/XzGJGw
+-------------+---------------+
| | Controls |
| Left child | |
| +---------------+
| | A|
| | Vertically |+
| | scrolling ||
| | items ||
| | |+
| | V|
+-------------+---------------+
я прочиталЭлемент Flexbox с прокручиваемым содержимым но это решает проблему горизонтальной прокрутки, а не вертикальной компоновки, как эта. ТакжеВложенный флексбокс с областью прокрутки имеет дело с вертикально сложенными вложенными флексбоксами, я думаю, что эта комбинацияrow
а такжеcolumn
направления сбивает с толку мою ситуацию.
Как фрагмент кода:
.container {
display: flex;
align-items: stretch;
}
.child {
border: 1px solid grey;
background-color: lightgrey;
flex: 1 1 auto;
}
.controls-panel {
display: flex;
flex-direction: column;
}
.controls {
flex: 0 0 auto;
}
.content-wrapper {
flex: 1 1 auto;
width: 400px;
overflow-y: auto;
}
.content-item {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
<div class="container">
<div class="child">
<p>In real life I am an inline img.</p>
<p>I am some content whoop de doo.</p>
<p>I am some content whoop de doo.</p>
<p>I am some content whoop de doo.</p>
<p>I want my sibling to equal my height.</p>
</div>
<div class="child controls-panel">
<div class="controls">
<p>Small controls area. Panel below should scroll vertically.</p>
</div>
<div class="content-wrapper">
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
</div>
</div>
</div>
Я не хочу фиксировать высоту каких-либо элементов здесь. Когда это происходит, я знаю высоту img, и поэтому я могу использовать CSS для принудительной установки высоты элементов справа, но мне было интересно, есть ли «истинный» способ flexbox для решения этой проблемы.