ReactJs - onClick not firing - reactjs

Question

Probably a super noobie question, but does anyone know why my onClick is not firing? I have tried changing the z-index in my CSS in case the button was too far back, but this did not change anything.
Here is my button module:
import React from 'react';
import classes from './button.module.css';
const button = (props)=>{
return(
<button onClick={()=>{console.log("hello");props.select()}} className={classes.button}>
<div className={classes.text_center}>
<div className={classes.button_text}>{props.text}</div></div>
</button>
);
}
export default button;
Later on I call the module:
this.state.skills?null:<Button select={()=>{console.log("hi");this.setState({skills:true})}} text={"Skills"}></Button>}.
The button actually displays fine, and the text is passed as a prop, but unfortunately I can't get the onClick to fire. Neither of the two console.log statements fire.
All help is appreciated.
///
As requested in the comments button.module.css:
#font-face {
font-family: 'Raleway';
src: url('../../../Fonts/Raleway/Raleway-Light.ttf') format('truetype') /* IE6-IE8 */
}
.button_choice{
width:10vw;
height:10vh;
top:25%;
border: 2px solid #4ca3dd;
position: relative;
display: inline-block;
margin-left:5vw;
background-color: white;
vertical-align: middle;
border-radius:10px;
padding:5px;
}
.button_choice:hover{
background-color: red;
}
.text_center{
height:100%;
width:100%;
position:relative;
display: table;
}
.text_center:hover{
background-color: blue;
}
.button_text{
font-family:"Raleway";
position:relative;
line-height: 30px;
font-size: 20px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
/////
Slight break through :/, when considering the 3 classes below, .background_init is a div spreading over the whole page. On the press of a button, this div slides to half of the size on the left by changing to the class .background_left. The buttons are contained within background_right. If I change height in .background_left to 200px, the buttons work (including hover), but obviously this completely messes up my styling. Any suggestions?
.background_init{
width:100vw;
height:100vh;
background-color: #4ca3dd;
}
.background_left{
width:50vw;
height:100vh;
background-color: #4ca3dd;
transition: width 2s;
}
.background_right{
overflow: auto;
width:50vw;
height:100vh;
transition: width 2s;
}

Answer 1

I am not sure why this works, but instead of using 100vh and 100vw, I used display:absolute and width:50%/ 100% and height:100%. If anyone can explain why this works I would be extremely grateful.