Я создаю веб-приложение, которое должно содержать простые интерактивные панели.
Моя цель - иметь один #контейнер, который можно прокручивать при переполнении, и # панели внутри него, которые также можно прокручивать, чтобы предотвратить переполнение. родитель (#container), если это возможно.
Другими словами:
- , если есть 1 панель: заполните оставшуюся высоту
- , если есть 1 панель и она имеет очень большая таблица, строки которой могут выходить за пределы панели: заполните оставшуюся высоту и покажите прокрутку на панели
- , если имеется 10 панелей, и они просто не могут уместиться: show scroll на # container
Вот код:
.container
{
background: red;
padding: 16px;
display: flex;
flex-direction: column;
height: 128px;
overflow: scroll;
}
.panel
{
background: green;
margin-bottom: 8px;
display: flex;
flex-grow: 1;
flex-direciton: column;
}
.table-container
{
background: blue;
display: flex;
flex-direction: column;
overflow: hidden;
}
<html>
<body>
<p>
Scenario: One table
<br>
This should shrink table and only show a scrollbar on the panel (green)
</p>
<div class='container'>
<div class='panel'>
<div class='table-container'>
<table>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
</table>
</div>
</div>
</div>
<p>
Scenario: Two elements that can fit in one container
<br>
This should shrink table, show scroll on it's panel and display second element just fine
</p>
<div class='container'>
<div class='panel'>
<div class='table-container'>
<table>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
</table>
</div>
</div>
<div class='panel'>
B
</div>
</div>
<p>
Scenario: Three elements that can't fit in one container
<br>
This should shrink table and show scrollbar on it's panel, while also displaying a scrollbar on the container
because these 3 can't fit in the container
</p>
<div class='container'>
<div class='panel'>
A
</div>
<div class='panel'>
<div class='table-container'>
<table>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
<tr><td>col1</td><td>col2</td></tr>
</table>
</div>
</div>
<div class='panel'>
B
</div>
</div>
</body>
</html>