React 和 flexbox 任何人都可以看看这个问题吗？ flex 中的 flex 报错答案

【问题标题】：React and flexbox can any one look at this issue ? flex in flex gives an errorReact 和 flexbox 任何人都可以看看这个问题吗？ flex 中的 flex 报错
【发布时间】：2017-07-02 12:43:07
【问题描述】：

您好，您会看到蓝色的 flex 框不是 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/

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

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

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

Updated fiddle

当给一个元素height 时，不管它的内容，它都会保持这个高度，当内容超过高度时，它只会溢出元素，这就是在这种情况下发生的情况。

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

【讨论】：

感谢回复，能否解释一下。height:100% 和 min-height 有什么区别？
@techsnake 我很快就会在这里发布一个小提琴，展示一些东西......完成后会给你一个便条
@techsnake 我做了这个小提琴，https://jsfiddle.net/53jnjeb9/，希望能根据元素的溢出设置，弄清楚height 和 min-height 在 3 种不同场景中的行为