Michael_B очень хорошо объясняет проблему здесь.
В дополнение к его ответу я бы сказал, что вы работаете также с абсолютным .content, поэтому ваш flexbox не является "обычным" flexbox.
Кстати, используяВаш HTML, я пытался привлечь его к ответственности.Хитрость заключается в том, чтобы удалить всю вашу фиксированную ширину.
Bootstrap - это возможный способ, но если вы уже начали свою работу, вы можете закончить ее, используя только свойства CSS и не используя JavaScript (как вы делаете): CSSиметь все полномочия, чтобы сделать это, без рамки.Это то, что я думаю.
Я пытался не менять ваш HTML.Я удалил только <div id="middle-border"></div>, потому что вы можете создать правильную границу в вашем #left-zone .list с помощью свойства box-sizing ... и border-right, естественно;)
В вашем CSS я изменилваша анимация с более простой непрозрачностью и переходом translateY (вы должны перейти в точку A к точке B без другой анимации, поэтому, я думаю, достаточно перехода).Но, ну, это не ошибка при использовании анимации, я думаю, что для этой работы проще использовать переход.
Еще одна важная идея - использовать CSS, который обеспечивает лучшую согласованность между браузерами по умолчанию.стилизация элементов HTML.Для этого я использовал "normalize.css": https://necolas.github.io/normalize.css/)
Это код, надеюсь, он поможет:
body {
background: #eee;
font-family: Tahoma;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%; /* no fixed width */
min-height: 400px; /*add min-height for 1 column layout */
height: 100vh;
max-width: 1000px;
margin: auto;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
overflow: hidden;
flex-direction: column;
position: relative;
}
#left-zone {
height: 50%;
flex: 0 0 auto;
display: flex;
width: 100%;
}
#left-zone .list {
display: flex;
list-style: none;
align-content: stretch;
flex-direction: column;
flex: 1 1 auto;
margin: auto;
padding: 0;
box-sizing: border-box;
}
.item input {
display: none;
}
label {
display: block;
opacity: 0.5;
height: 50px;
text-align: center;
line-height: 50px;
position: relative;
}
label:hover {
opacity: 0.75;
cursor: pointer;
}
/* content slides in on the right side of the flexbox */
.content {
position: absolute;
right: 0;
bottom: 0;
opacity: 0;
transform: translateY(100%);
height: 50%;
width: 100%;
transition: 0.5s ease-out;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
pointer-events: none;
}
/* p tag content in the right side of the flexbox */
.content p {
max-width: 50%;
text-align: center;
}
/* Right side of flexbox where the content slides in */
#right-zone {
background-color: #ff8f8f;
width: 100%;
flex: 1 0 auto;
height: 50%;
}
input:checked ~ .content {
transform: translateY(0%);
opacity: 1;
}
@media (min-width:480px){
#flex-container {
flex-direction: row;
min-height: auto;
height: 400px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#left-zone .list {
border-right: 2px solid #cccccc;
}
.content {
width: 65%; /* no fixed width */
height: 100%;
pointer-events: auto;
transform: translateY(-100%);
}
#left-zone {
width: 35%; /* no fixed width */
}
#right-zone {
height: 100%;
width: 65%; /* no fixed width */
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet">
<div id="flex-container">
<div id="left-zone">
<ul class="list">
<li class="item">
<input type="radio" id="radio_strawberries" name="basic_carousel" checked="checked" />
<label class="label_strawberry" for="radio_strawberries">strawberry</label>
<div class="content content_strawberry">
<h1>strawberry</h1>
<p>The garden strawberry... blah blah</p>
</div>
</li>
<li class="item">
<input type="radio" id="radio_banana" name="basic_carousel"/>
<label class="label_banana" for="radio_banana">banana</label>
<div class="content content_banana">
<h1>banana</h1>
<p>A banana... blah blah</p>
</div>
</li>
<li class="item">
<input type="radio" id="radio_apple" name="basic_carousel"/>
<label class="label_apple" for="radio_apple">apple</label>
<div class="content content_apple">
<h1>apple</h1>
<p>The apple... blah blah</p>
</div>
</li>
<li class="item">
<input type="radio" id="radio_orange" name="basic_carousel"/>
<label class="label_orange" for="radio_orange">orange</label>
<div class="content content_orange">
<h1>orange</h1>
<p>The orange... blah blah</p>
</div>
</li>
</ul>
</div>
<div id="right-zone"></div>
</div>