У меня есть центрированная структура flexbox, которая отображает поле со списком клиентов.
Мне бы хотелось, чтобы, когда экран становится уже, чем содержимое внутри #box div, он не скрывался за пределами области просмотра, но добавляет переполнениесамый длинный элемент, который #list с таблицей, поэтому #box может динамически уменьшаться.
Он работает так, как должен, когда я добавляю width: 100% к #box, но я не хочу, чтобы полеполная ширина экрана до тех пор, пока он не будет соответствовать размеру содержимого.
|JSFIDDLE DEMO |
body, html {
margin: 0;
width: 100%;
height: 100%;
font-size: 16px;
}
* {
box-sizing: border-box;
}
#wrap {
background-color: red;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
flex-direction: column;
}
#box {
background-color: #dcdcdc;
padding: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
/*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
}
#box > div {
flex: 1 0 auto!important;
}
#title {
text-align: center;
margin-bottom: 20px;
font-size: 20px;
color: blue;
}
table {
border-spacing: 0;
border-collapse: collapse;
table-layout: auto;
white-space: nowrap;
width: 100%;
}
table thead {
font-weight: bold;
}
table tbody tr {
height: 30px;
}
table td {
padding: 0 5px;
}
#list {
overflow: auto;
background-color: rgba(0,0,0,0.05);
}
<div id="wrap">
<div id="box">
<div id="title">
List of customers
</div>
<div id="list">
<table>
<thead>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Address</td>
<td>Telephone</td>
<td>Decription</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>25th Jeffersons</td>
<td>555 2589654123</td>
<td>Pretty bad boy</td>
</tr>
<tr>
<td>Anna</td>
<td>Redford</td>
<td>Trading street 252</td>
<td>555 2541258745</td>
<td>Booty babe</td>
</tr>
<tr>
<td>Jack</td>
<td>Jackson</td>
<td>Dummy Dumm 55</td>
<td>555 123456789</td>
<td>Random persona</td>
</tr>
<tr>
<td>Buck</td>
<td>Buckson</td>
<td>Dummy Dumm 66</td>
<td>555 987654321</td>
<td>Another random persona</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
1 - полноэкранное окно
2 - изменяемое (меньше) окно
3 - изменяемое (меньше)) окно - желаемый результат
1 
2 
3 