html - React 和 flexbox 谁能看看这个问题？ flex in flex 报错

Question

你好，你会看到蓝色的 flex box 不是 flex 任何解决方案

index.html

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JSX 部分它只包含 4 个 div

var Hello = React.createClass({
  render: function() {
    return <div className = "wrapper" >
             < div className = "nav" >deneme < /div> 
             < div className = "main" >
             <div className="dene">
             <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur semper turpis, id mattis magna tempus nec. Nunc arcu justo, tristique ut tortor et, commodo elementum dui. Duis odio quam, placerat et justo scelerisque, egestas imperdiet ipsum. In at dolor elit. Mauris eu ex fermentum velit feugiat tempus. Curabitur nec turpis ac leo hendrerit rhoncus id eget ante. Ut vel ante vestibulum elit tempor dapibus. Curabitur vitae elementum magna. Ut ut pellentesque dui, eget aliquet mi. Phasellus tincidunt rhoncus urna et elementum. Fusce hendrerit viverra placerat. Vestibulum placerat fringilla ornare. Donec ligula ligula, fermentum et ipsum at, euismod imperdiet tellus. Donec non nibh magna. Cras eu elit et orci posuere pellentesque ac vel leo.</h1>
             </div>
             < /div> < /div>;
  }
});

ReactDOM.render( < Hello / > ,
  document.getElementById('container')
);

CSS文档文件一定是这里有问题

.wrapper,
html,
body {
  height: 100%;
  margin: 0;
}

#container{
 display:flex;
 height:100%;
 margin:0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex:1
}

.nav {
  background-color: red;
  flex: 1
}

.dene{
    display:flex;
    flex:1; 
    justify-content: center;
    text-align: center;
    align-items: center;
    margin:auto 40%;

}
.main {
  display:flex;
  background-color: blue;
  flex: 10;


}

这是蓝色区域的结果

https://jsfiddle.net/techsnake/fo645d0x/

Answer 1

在container 规则中将height 更改为min-height，它会随内容增长

#container{
 display:flex;
 min-height:100%;            
 margin:0;
}

Updated fiddle

当给元素一个 height 时，它会保持那个高度而不考虑它的内容，当内容超过高度时它会简单地溢出元素，这就是本例中发生的情况。

使用 min-height 将允许元素随其内容一起增长，其中 min- 是 be minimum this height 的缩写