How can I deal with a test that has a child element inside of a parent div that has a css property of display:none?

[Tacoholic]

How does one deal with a test that has a child element inside of a parent div that has a css property of display: none ?

Here is my scenario:
So I am getting a flaky test in Cypress. On the times it fails, which is the first attempt, it is because the parent div is not visible because it has the css property: display: none. I've used {force: true}, but I am looking for a better solution.

The error I get is the following:
Timed out retrying: cy.click() failed because this element is not visible:
<button _ngcontent-wbn-c390="" class="btn btn-success create-assignment ng-star-inserted">...</button>

This element <button.btn.btn-success.create-note.ng-star-inserted> is not visible because its parent <div.mobile-table.show-mobile> has CSS property: display: none

[bahmutov]

Make sure the parent is visible first, then click on the child button

cy.get('parent selector').should('be.visible')
  .find('button selector').click()