Estou estudando sobre flexbox e tentei montar uma estrutura com flex layout ao qual eu tenho um container que preenche toda a minha página, dentro deste container eu tenho dois elementos, uma sidebar posicionado a esquerda com altura de 100% e largura fixa e tenho também um content ao qual será responsável por conter o conteúdo da minha página, sendo que no entanto um dos meus conteúdos será uma área de notificação (notification) que terá altura fixa mais largura de 100% do meu content e dentro dessa área irei ter diversos cards que irá conter as mensagens propriamente.
O problema é que a minha notification está extrapolando a largura do meu content mesmo eu definindo a max-width para ela.
body {
height: 100%;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
html,
body,
#root {
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
background: red;
display: flex;
}
.sidebar {
display: flex;
background: blue;
width: 100px;
height: 100%;
}
.content {
background: yellow;
display: flex;
padding: 15px;
margin: 15px;
flex: 1;
}
.notification {
display: flex;
background: gray;
overflow-x: auto;
width: 100%;
height: 250px;
max-width: 100%;
padding: 10px;
align-items: center;
/* Se eu coloco da forma abaixo funciona */
/* max-width: 100px; */
/* min-width: 100%; */
}
.card {
height: 200px;
min-height: 200px;
min-width: 200px;
width: 200px;
background: green;
margin-left: 10px;
}
<div id="root">
<div class="container">
<div class="sidebar"></div>
<div class="content">
<div class="notification">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
</div>
</div>