The only requirement for incoming email is that you have an MX record that is an A record. That MX record could be any hostname, and it doesn't even have to be a subdomain of your domain. So, there's no problem with using abc.example.com.
With regard to the website showing when accessed by mail.example.com, that really depends on how you have your webserver setup. Most webservers currently will use virtualhosting to determine the content to serve based on the hostname, and not just the IP address. You have a few options. The best option is to block all traffic that does not come from Cloudflare. If your firewall can handle it, perhaps you could block port 80 and 443 traffic, and then whiletist the Cloudflare IP addresses. Or on the web server level, for instance with Apache, you could add a deny from all line and then a allow from <ip> for each of their IPs, which you get from them. If that is not an option, perhaps you could setup your web server to simply deny any request for that host. For instance, if you are using Apache, you could drop a .htaccess file in the document root which contains something like:
RewriteCond %{HTTP_HOST} !^(www\.)?example\.com$
RewriteRule ^ http://example.com/
This would redirect traffic to your actual site, which you have resolving through the third party.
If that doesn't work, you could perhaps place some PHP code in an index.php file which does something similar.
