Why is "overflow-x: hidden" also hiding overflow-y?

Question

EDIT 2: Turns out the problem wasnt with the overflow but had to do with the grid of the grandparent element. My question should have been this. This makes this whole post irrelevant. Sorry for the inconvenience. It won't let me delete the post.

EDIT: Here is a JSFiddle to my codebase because the answers until now are all correct but don't apply. Down below is a super simplified version of my issue.

I have read quite a lot of posts (1, 2, 3 ...) about how the two overflows clash with eachother, but nothing has worked for me. Overflow-x & y cannot be used in combination, and I get that. But I am only declaring one...

The paragraph should not be visible outside of the container (left and right). However, setting overflow-x: hidden also hides the title of my box. (I want the title over the border).

Any ideas what I'm doing wrong?

main {
  box-sizing: border-box;
  width: 300px;
  height: 150px;
  position: relative;
  margin: auto;
  margin-top: 50px;
  padding: 1em;
  outline: 3px solid;
  font-size: 16px;
  font-family: sans-serif;
  overflow-x: hidden;
}

h4 {
  font-size: 1.5em;
  background: white;
  position: absolute;
  top: -2em;
  left: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

p {
  white-space: nowrap;
}

<main>
  <h4>Lorem Ipsum</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec convallis leo.</p>
</main>

Answer 1

For me using overflow-x: clip; instead of overflow-x: hidden; took care of it