Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Height in parent element not followed

See original GitHub issue

I have the following code:

<Box width="100%" height="50vh">
    {validCrop ? <canvas ref={canvasRef} /> :
        <ReactCrop crop={crop} onChange={c => setCrop(c)}>
            <img alt="Highlight your cactus" src={imgSrc} />

Width is obeyed, but height is ignored. I expected the behaviour to be either that the image is warped to fit the size or, preferably, the lowest dimension is chosen to keep the aspect ratio of the image.

Am I doing anything wrong? Is this intended behaviour, and if so, is there any way to set the image size based on height?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

DominicTobiascommented, Mar 13, 2022

I see the issue, please upgrade to 10.0.0-beta.5 and try again

DominicTobiascommented, Mar 14, 2022

Yep you’ll need to be aware of the size of the rendered image to set an initial crop here’s an example:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Child height % will not follow parent container [duplicate]
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value? (1...
Read more >
CSS Parent Selector - Ahmad Shadeed
This checks if the <h2> element is followed directly by a <p> element. Or we can use it with a form element to...
Read more >
Exploring the Complexities of Width and Height in CSS
The following article is co-authored by Uri Shaked and Michal Porag. Let's explore the complexities of how CSS computes the width and height...
Read more >
Why is height not working?. Parent does not stretch to child's…
Why is element overflowing even though I've my height set? Although width is pretty straightforward, height seems to cause people many problems.
Read more >
How to Make a Child Div Element Wider than the Parent Div
On this page, we'll demonstrate how you can make a child element wider than the parent element. See what CSS properties you need...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found