<p dir="auto">Describe what you were doing when the bug occurred:</p>
<ol dir="auto">
<li>fetching data from gh api</li>
<li>trying to append pictures to a slider ;p</li>
<li>happily hacking</li>
</ol>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.9.0-75726fadfd</p>
<p dir="auto">Call stack: at store_Store.getElementAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:21068:35)<br>
at store_Store.getElementIDAtIndex (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:21084:26)<br>
at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28520:63<br>
at List.render (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22776:18)<br>
at wi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13590:76)<br>
at vi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13581:10)<br>
at nk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16165:86)<br>
at mk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15541:11)<br>
at lk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15533:23)<br>
at dk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:15517:5)</p>
<p dir="auto">Component stack: at List (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:22471:30)<br>
at div<br>
at AutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:3006:5)<br>
at div<br>
at div<br>
at Tree_Tree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28271:47)<br>
at div<br>
at div<br>
at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28763:3)<br>
at OwnersListContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:27400:3)<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:28048:3)<br>
at Components_Components (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:33225:52)<br>
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29061:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29178:32)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32776:3)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24164:3)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:24653:3)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29246:3)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:36049:3)</p>
<p dir="auto">If you use CSS to set the height of the react app container to 100% (and the other containing containers as well), then you will get the error "Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering" outputted to your developer console after you continue from a breakpoint.</p>
<p dir="auto">I've got a very simple testcase. This is the create-react-app example, with only the following CSS added:</p>
<p dir="auto">html {<br>
height: 100%;<br>
}</p>
<p dir="auto">#root {<br>
height: 100%;<br>
}</p>
<p dir="auto">.App {<br>
height: 100%;<br>
}</p>
<p dir="auto">React version: 17.0.1<br>
React DOM version: 17.0.1</p>
<p dir="auto">Repros in Chrome (89.0.4389.72) and Edge (88.0.705.81)</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>download and unzip <a href="https://github.com/facebook/react/files/6072375/hello-world.zip">hello-world.zip</a> (or create a new app from scratch and add the above CSS to index.css)</li>
<li>in the folder created above, run "npm install"</li>
<li>run "npm start"</li>
<li>Open a web browser to the specified location serving the page.</li>
<li>Open developer tools, and set a breakpoint somewhere inside of app.js (you can alternatively add a "debugger" statement inside of your app.js)<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1451620/109728370-0aade480-7b84-11eb-8f6c-ad7ca3c4a4bf.png"><img src="https://user-images.githubusercontent.com/1451620/109728370-0aade480-7b84-11eb-8f6c-ad7ca3c4a4bf.png" alt="image" style="max-width: 100%;"></a></li>
<li>restart the browser, and after hitting the breakpoint, hit continue</li>
<li>Check the console and observe the error output.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1451620/109728430-24e7c280-7b84-11eb-92e7-97a170a575d9.png"><img src="https://user-images.githubusercontent.com/1451620/109728430-24e7c280-7b84-11eb-92e7-97a170a575d9.png" alt="image" style="max-width: 100%;"></a></li>
</ol>
<p dir="auto">There are no dependencies other than react for this repro.</p>

<p dir="auto">Link to code example:<br>
<a href="https://github.com/facebook/react/files/6072375/hello-world.zip">hello-world.zip</a></p>

<h2 dir="auto">The current behavior</h2>
<p dir="auto">Console outputs error whenever a breakpoint is hit, only when CSS has app container sized at 100%</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">Console should not output error noise regardless of sizing of app container</p>