после исследования гибкой модели коробки в течение целого дня, я должен сказать, что мне это действительно нравится. Он реализует функциональность, которую я реализую в JavaScript быстрым и чистым способом. Одна вещь, однако, меня беспокоит:
Я не могу развернуть div, чтобы получить полный размер, рассчитанный с помощью гибкой модели коробки.
Чтобы проиллюстрировать это, я докажу пример. В нем два гибких места занимают точную высоту и высоту, но внутри этого div только высота элемента "<p>...</p>". В этом примере это не имеет значения, но то, что я изначально пытался, заключалось в размещении "гибкой модели коробки" внутри другой "гибкой модели коробки", и это должно быть возможно, на мой взгляд,
html, body {
font-family: Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#box-1 {
background-color: #E8B15B;
}
#box-2 {
background-color: #C1D652;
}
#main {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.flexbox {
display:-moz-box;
display:-webkit-box;
display: box;
text-align: left;
overflow: auto;
}
H1 {
width: auto;
}
#box-1 {
height: auto;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-flex: 3;
-webkit-box-flex: 3;
box-flex: 3;
}
#box-2 {
height: auto;
min-width: 50px;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
#fullsize{
background-color: red;
height: 100%;
}<div id="main" class="flexbox">
<div id="box-1" class="flexbox">
<div id="fullsize">
<p>Hallo welt</p>
</div>
</div>
<div id="box-2" class="flexbox">
</div>
</div>