Tôi đã tạo bố cục đáp ứng cho ứng dụng bằng Flexbox. Bố cục gọi cho một menu có thể thu gọn ở bên trái, một khối có tiêu đề và phần thân ở giữa và khung trợ giúp có thể chuyển sang bên phải (có nhiều hơn nhưng đó là cấu trúc cơ bản).white-space: nowrap ngắt bố cục flexbox
Menu bên trái có hai trạng thái: rộng 180px hoặc rộng 80 px. Ngăn trợ giúp bị ẩn hoặc mất 180px. Hộp giữa chiếm phần còn lại của không gian. Flexbox hoạt động như một sự quyến rũ.
Sự cố bắt đầu khi tôi thực hiện div cuộn bằng cách sử dụng white-space: nowrap. Tôi có một loạt các mục cần phải được hiển thị trong một cuộn ngang, vì vậy tôi có một danh sách div với các mục, thiết lập để overflow:auto và white-space: nowrap.
Thông thường, tính năng này hoạt động như một nét duyên dáng, nhưng giờ đây nó đã phá vỡ bố cục flex của tôi. Thay vì lấy chiều rộng của bậc cha mẹ (flex) div, con lăn làm cho div rộng hơn, do đó đẩy khung trợ giúp ra khỏi giới hạn.
Các fiddle sau minh họa vấn đề này:
http://jsfiddle.net/PieBie/6y291fud/
Bạn có thể chuyển đổi sự giúp đỡ-pane bằng cách nhấn Toggle giúp đỡ trên thanh menu. Tạo lại sự cố bằng cách nhấp vào chuyển đổi khoảng trắng khoảng trắng danh sách trong menu, điều này sẽ chuyển đổi thuộc tính CSS white-space: no-wrap của danh sách. Nếu cửa sổ trợ giúp mở, bạn có thể thấy nó bị đẩy ra ngoài giới hạn.
Danh sách dưới cùng là những gì tôi muốn đạt được, nhưng tôi muốn nó có chiều rộng đầy đủ của phụ huynh.
Tôi có thể tạo lại sự cố trong Chrome, Firefox, Opera, Vivaldi và Edge. Internet Explorer 11 phát đẹp (° _ °). Tôi thích một giải pháp CSS tinh khiết (SCSS cũng là một lựa chọn), nhưng nếu cần tôi có thể sử dụng JS.
$('#nav-toggle').on('click',function(){
\t $(this).parent().toggleClass('collapsed');
});
$('#help-toggle').on('click',function(){
\t $('#help-pane').toggleClass('visible');
});
$('#list-toggle').on('click',function(){
\t $('#list').toggleClass('nowrap');
});body,html{width:100%;height:100%;overflow:hidden;}
#body{
display:flex;
flex-flow:row nowrap;
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
width:100%;
height:100%;
background-color:#abc;
overflow:hidden;
}
#shell{
flex: 1 1 auto;
display:flex;
flex-flow:row nowrap;
position:relative;
width:100%;
min-height:100%;
}
#left{
flex: 0 0 180px;
min-height:100%;
min-width: 0;
background:lightblue;
}
#left.collapsed{
flex: 0 0 80px;
}
#mid{
flex: 1 1 auto;
min-height:100%;
min-width: 0;
display:flex;
flex-flow:column nowrap;
align-items:stretch;
align-content:stretch;
position:relative;
width:100%;
min-height:100vh;
min-width: 0;
background:purple;
}
#mid-top{
flex: 0 0 auto;
min-height:100px;
background:green;
}
#mid-bottom{
min-height:calc(100% - 100px);
flex: 1 1 auto;
background:lightgreen;
}
#list{
overflow: auto;
width: 100%;
max-width: 100%;
}
#list.nowrap{
white-space: nowrap;
}
#secondlist{
overflow: auto;
max-width: 250px;
white-space: nowrap;
}
.list-item{
display: inline-block;
width: 50px;
height: 50px;
margin: 2px;
background: purple;
}
.list-item.odd{
background: violet;
}
#help-pane{
display:none;
flex: 0 0 0px;
background:red;
}
#help-pane.visible{
display:inherit;
flex:0 0 180px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
<div id="shell">
<div id="left">
<div id="nav">
- menu -
</div>
<div id="help-toggle">
help toggle
</div>
<div id="nav-toggle">
nav toggle
</div>
<div id="list-toggle">
list whitespace toggle
</div>
</div>
<div id="mid">
<div id="mid-top">
- mid top -
</div>
<div id="mid-bottom">
- mid bottom- <br><br>
<div id="list">
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
</div>
<hr>
<div id="secondlist">
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
<div class="list-item"> </div>
<div class="list-item odd"> </div>
</div>
</div>
</div>
</div>
<div id="help-pane" class="visible">
- help-pane -
</div>
</div>
Dường như bạn đang gặp phải các thiết lập kích thước tối thiểu * mặc định cho các hạng mục flex *. Theo mặc định, một mặt hàng flex không thể nhỏ hơn kích thước của nội dung của nó. Có một giải pháp dễ dàng. http://stackoverflow.com/a/36247448/3597276 –