Flexbox child bigger than flexbox parent.
I know that we can solve the problem with seting overflow: hidden; in parent. But we need solve this problem without seting overflow: hidden;:
const Child = () => <div className="h-16 w-24 ml-2 flex-grow-0 flex-shrink-0 bg-gray-700">d</div>;
<main className="w-168 flex p-4 bg-green-700">
<div className="w-56 flex-grow-0 flex-shrink-0 bg-red-900">child</div>
<div className="w-full p-4 bg-blue-300"> <!-- we can solve the problem with seting overflow: hidden; on this tag -->
<div className="w-full flex flex-no-wrap overflow-x-auto bg-gray-500">
<Child />
<Child />
<Child />
<Child />
<Child />
<Child />
</div>
</div>
</main>
.h-16 {
height: 4rem;
}
.w-24 {
width: 6rem;
}
.w-168 {
width: 42rem;
}
.w-56 {
width: 14rem;
}
.w-full {
width: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.ml-2 {
margin-left: 0.5rem;
}
.p-4 {
padding: 1rem;
}
.flex {
display: flex;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-no-wrap {
flex-wrap: nowrap;
}
.bg-gray-700 {
background-color: #4a5568;
}
.bg-green-700 {
background-color: #2f855a;
}
.bg-red-700 {
background-color: #c53030;
}
.bg-blue-300 {
background-color: #90cdf4;
}
