Why does IE 10 push the content out of the viewport?

My problem is that I have two buttons placed on the right side of the screen. But somehow with IE10 (not tested in other versions) the buttons are pushed out of the viewport. Does anyone else have this issue and how can I fix this?

What it should look like (and looks like in Chrome):

What it looks like in IE10 (the buttons are somewhere on the right where they can't be seen anymore and there's not even a scrollbar):

Live example on the jsFiddle

HTML:

<div class="section-header">
    <div tabindex="0" class="section-toggle section-toggle-up" role="button" aria-pressed="false">
        <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
        <div class="html-face">Reader 1</div>
    </div>
    <div class="section-header-widgets">
        <div tabindex="0" class="slider slider-up" role="button" aria-pressed="false">
            <input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
            <div></div>
        </div>
        <div class="buttonContainer">
            <div class="sidebuttons">
                <button type="button" class="removeButton"></button>
                <button type="button" class="exportButton"></button>
            </div>
        </div>
    </div>
</div>

CSS:

.section-header, .section-header-widgets {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    display: -ms-flexbox;
    -ms-flex-direction: row;
    -ms-flex-align: center;
    -ms-flex-pack: start;
}

.section-header-widgets {
    width: 100%;
}

.section-toggle {
    min-height: 50px;
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 2.5em;
    font-weight: bold;
    line-height: 2.5em;
    max-height: 2.5em;
    cursor: pointer;
}

.section-toggle-up {
    min-width: 200px;
}

.slider {
    background-repeat: no-repeat;
    background-position: left;
    height: 34px;
    width: 65px;
    margin-left: 3em;
    cursor: pointer;
    border: 1px solid black;
}

.buttonContainer {
    flex: 1;
    -ms-flex: 1;
    text-align: right;
}

.addButton, .removeButton, .exportButton, .openFileButton {
    height: 40px;
    width: 40px;
    padding: 0;
    border: 1px solid black;
    cursor: pointer;
    margin-right: 20px;
}

Solution

Flexbox support appears to be a bit spotty in IE 10. It appears that you can get it to behave by:

Removing width: 100%; from .section-header-widgets
Adding flex-grow: 1; and -ms-flex: 1 0; to .section-header-widgets

    .section-header, .section-header-widgets {
    	display: flex;
    	flex-direction: row;
    	align-items: center;
    	justify-content: flex-start;
    	display: -ms-flexbox;
    	-ms-flex-direction: row;
    	-ms-flex-align: center;
    	-ms-flex-pack: start;
    }
    
    .section-header-widgets {
        /*Removed
        width: 100%;*/
        /*Added*/
        flex-grow: 1;
        -ms-flex: 1 0;
    }
    
    .section-toggle {
    	min-height: 50px;
    	background-repeat: no-repeat;
    	background-position: left;
    	padding-left: 2.5em;
    	font-weight: bold;
    	line-height: 2.5em;
    	max-height: 2.5em;
    	cursor: pointer;
    }
    
    .section-toggle-up {
    	min-width: 200px;
    }
    
    .slider {
    	background-repeat: no-repeat;
    	background-position: left;
    	height: 34px;
    	width: 65px;
    	margin-left: 3em;
    	cursor: pointer;
        border: 1px solid black;
    }
    
    .buttonContainer {
    	flex: 1;
    	-ms-flex: 1;
    	text-align: right;
    }
    
    .addButton, .removeButton, .exportButton, .openFileButton {
    	height: 40px;
    	width: 40px;
    	padding: 0;
    	border: 1px solid black;
    	cursor: pointer;
    	margin-right: 20px;
    }

<div class="section-header">
	<div tabindex="0" class="section-toggle section-toggle-up" role="button" aria-pressed="false">
		<input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
		<div class="html-face">Reader 1</div>
	</div>
	<div class="section-header-widgets">
		<div tabindex="0" class="slider slider-up" role="button" aria-pressed="false">
			<input type="text" tabindex="-1" role="presentation" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;">
			<div></div>
		</div>
		<div class="buttonContainer">
			<div class="sidebuttons">
				<button type="button" class="removeButton"></button>
				<button type="button" class="exportButton"></button>
			</div>
		</div>
	</div>
</div>

JS Fiddle