Set background of div using flex - css

Question

i am trying to develop a movie portal using react js. I am trying to display the movie poster, and the movie details adjacent to it.
I am using flex, but am encountering an issue with the output. The movie details are being pushed to an extreme end, and i am unable to figure out the reason.
I am trying to get the "The Dark Knight" adjacent to the poster.
This is the output screenshot
my Js code is as follows,
dialogContent: (backgroundUrl) => ({
backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(${backgroundUrl}) `,
backgroundSize: 'cover',
overflow: 'hidden',
backgroundRepeat: 'no-repeat',
backgroundSize: '100%',
height: '33%',
minHeight: 400,
color: 'white',
padding: 10
}),
poster: () => ({
padding:5,
width:'100%',
margin:"auto"
}),
text:() =>({
color:"white"
}),
main:() =>({
backgroundColor: "black",
display: "flex"
})
}
class MovieDisplay extends Component {
render() {
//console.log(this.props);
const {movie} = this.props.location.state.movie;
return (
<div style={styles.main()}>
< div style={styles.poster()}>
<img src={movie.poster_path} />
</div>
<div style={styles.dialogContent(movie.backdrop_path)}>
<h1 style={styles.text()}>{movie.original_title}</h1>
<h2 style={styles.text()}>{movie.popularity}</h2>
</div>
<div >
<h5 style={styles.text()}> more content would be updated soon</h5>
</div>
</div>
);
}
}
Can anyone help figure out the reason?
Thanks in advance.

Answer 1

The problem is with the poster style set to width of 100% and margin of 'auto'.
poster: () => ({
padding:5,
// width:'100%', <-- Try changing this by either removing it or setting to 'auto' or a smaller value
// margin:"auto" <-- Get rid of this
})

Answer 2

One solution would be to add another inside main container, this way you have better control over the poster and movie information spacing. You should also add some justification/alignment to your flex styling, otherwise the child elements will float to the ends of the flexed container (As seen in your example).
Add the below to your styles.
main:() =>({
backgroundColor: "black",
alignItems: 'center'
}),
/*add this style*/
innerMain: () =>({
display: "flex",
}),
And then in your MovieDisplay component, write this.
<div style={styles.main()}>
<div style={styles.innerMain()}>
...
<div style={{width: 100 + '%'}}>
<h5 style={styles.text()}> more content would be updated
soon
</h5>
</div>
</div>
<div>
Edit: I've added a codepen to demonstrate what these styles will accomplish. More styling (like for the poster image) might be required but this is the general layout of what you're looking for.
I also added a minWidth of 200 to the dialogContent and made the div containing more content... have a width of 100% to fill the remaining space.