Overflow-y: visible; in CSS does not work solution

The content of this article is about the solution to the problem that overflow-y: visible; does not work in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Scenario

One of the recent requirements is a h5 page on the mobile side. It requires a row of selectable cards. The part beyond the container can be slid left and right. At the same time, there must be a delete button in the upper left corner of each card. button. As shown below:

I thought: so easy, add a max-width: 200px; white-space: nowrap; overflow- on the parent container x: auto; That’s it. The demo is as follows:

<div>
  <div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
  <div>
    <div></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 is as shown below:

Look at the red in the upper left corner of the rectangle Blocks, part of the original 20 * 20 red block is hidden. I thought it was caused by overflow, so I tried to use overflow-y: visible; to solve it, 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 understand that the reason is as follows

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’.

The rough meaning is that when overflow-x is scroll or auto, overflow-y is set to auto and vice versa. This is very embarrassing, so how to solve this problem.

ps: The above paragraph comes from the w3c document, but I have been searching for a long time and can’t find the original text. 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? What I use here is to add the following style to container

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

The principle is actually quite good Simply, after adding padding-top: 20px;, the absolutely positioned red square will have space to display without exceeding the container volume, and then use margin-top: -20px; to offset the change in position. 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, it is processed through padding-left and margin-left.

Related recommendations:

iframe double scroll bar solution CSS3 overflow-y attribute_html/css_WEB-ITnose

Overflow processing application of HTML tags_HTML/Xhtml_Web page production

The above is the detailed content of Overflow-y: visible; in CSS does not work solution. For more information, please follow other related articles on the PHP Chinese website!