What's causing the text to disappear?

1

I am having a problem. For some reason, the text in one of the boxes tends to disappear instead of wrapping when the screen resolution hits a certain point. I am being quite desperate, and I’ll try to rewrite the code to make it clearer and better, but I would like to know the reason for this odd behavior anyway.

I am crying! Click me!

If I delete this chunk of code:

.wrapper {
  display: flex;
  flex-flow: column wrap;
  justify-context: space-around;
  flex: 1 1 100%;
}

The app works fine, BUT then the two buttons become disobedient.

Any advice is highly welcome even if it has nothing to do with the issue.

2

I couldn’t quite fix the problem using your code. You should really clean it up a lot first. My best guess is that somehow the height of one of the elements is set to be fixed based on the width of the window. In that case the content of your p tag overflows its parent it gets wrapped to the right. It may seem that it disappears, but its actually to the right outside of the window bounds. This is a good article about flex. I’ve made this pen based on your design. I hope it will help you figuring out what is wrong with yours. I haven’t really used flexbox before so take it with a grain of salt.

3

I am aware of the code not being too clean. I’ve done a lot of refactoring, and it seems to be cleaner and is working better now. I’ve also fixed the issue, but I still don’t know what caused the weird behaviour, and why it was behaving like that.

I think there is no good article about Flexbox that I have not read yet. I’m slowly getting more and more familiar with it.

Thanks for taking the time, I may use something from the code. Cheers!

1 Like