tech snake tech snake - 1 month ago 7
React JSX Question

React and flexbox can any one look at this issue ? flex in flex gives an error

Hello as you ll see blue flex box is not flex any solution please

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 part it contains just 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 document file there must be a problem here

.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;


}


Here is the result look at blue area

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

Answer Source

Change height to min-height in the container rule and it will grow with its content

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

Updated fiddle

When giving an element a height it will keep that height regardless its content, which will simply overflow the element when the content exceed the height, which was what happened in this case.

Using min-height will allow the element to grow along with its content, where the min- is short for be minimum this height