Analysis and solution of the reason why overflow-y: visible; does not work in CSS

Scenario

A recent requirement is an h5 page for mobile devices, which requires a row of selectable cards. The part that exceeds the container can be slid left and right, and each card must have a delete button in the upper left corner. As shown below:

I thought: So easy, just add max-width: 200px; white-space: nowrap; overflow-x: auto; to the parent container and it will be done. The demo is as follows:

<div class="container">
  <div class="son">
    <div class="delete_btn"></div>
  </div>
  <div class="son">
    <div class="delete_btn"></div>
  </div>
  <div class="son">
    <div class="delete_btn"></div>
  </div>
</div>
.container {
  max-width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}
.son {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  margin-right: 20px;
}
.delete_btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  transform: translateX(-50%) translateY(-50%);
}

I thought everything went well, but the result I got was as shown below:

Look at the red square in the upper left corner of the rectangle. A part of the original 20 * 20 red square is hidden. I thought it was due to overflow, so I tried to solve it by using overflow-y: visible;, but it didn't work. Careful friends should remember that the default value of overflow is visible. So what is the reason?

Why

After searching for a long time, I roughly understood the following reasons

The computed values ​​of 'overflow-x' and 'overflow-y' are the same as their specified values, except that some combinations with 'visible' are not possible: if one is specified as 'visible' and the other is 'scroll' or 'auto', then 'visible' is set to 'auto'. The computed value of 'overflow' is equal to the computed value of 'overflow-x' if 'overflow-y' is the same; otherwise it is the pair of computed values ​​of 'overflow-x' and 'overflow-y'.
This means that when overflow-x is scroll or auto, overflow-y is set to auto, and vice versa. This is very embarrassing. How do we solve this problem?

ps: The above paragraph is from the w3c document, but I couldn't find the original text after searching for a long time. If you find it, please leave a link~ [Manual dog head]

How

After all, I still want the red square in the upper left corner to be displayed completely, so what is the solution? Here I use the following style to add to the container

padding-top: 20px;
margin-top: -20px;

The principle is actually quite simple. After adding padding-top: 20px;, the absolutely positioned red square has space to display and will not exceed the container volume. Then, the position change is offset by margin-top: -20px;. As shown in the figure

ps: The covered part on the left side of the first red square is solved with the same idea, that is, by using padding-left and margin-left.

Summarize

The above is the analysis and solution of the reasons why overflow-y: visible; does not work in CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!