Question 45760 in CSS Question posted in
Some basic documentation can be found here.

I have a flexbox container with 2 children. one of them is wider than the parent container, how can I add overflow to it? – CSS

I want the container with the "overflow" class to be able to have horizontal scroll since it is wider than its direct parent. how can I do it?

html, body{
   padding:0px;
   margin:0px;
}

.container{
   display:flex;
   background:yellow;
   width:100%;
   height:100px;
   max-width:100%;
}

.container div{
  border:1px solid red;
}

.sizeSmall{
  width:200px;
}

.overflow{
  width:4000px;
  overflow:auto;
}
<div class="container">
 <div class="sizeSmall"></div>
 <div class="overflow"></div>
<div>
Tags:

2

Answers


  1. 0

    You would probably need an inner container inside the one you want to scroll:

    html,
body {
  padding: 0px;
  margin: 0px;
}

.container {
  display: flex;
  background: yellow;
  width: 100%;
  height: 100px;
  max-width: 100%;
}

.container div {
  border: 1px solid red;
}

.sizeSmall {
  min-width: 200px;
  max-width: 200px;
}

.grow {
  flex-grow: 1;
  overflow: auto;
}

.overflow {
  width: 4000px;
}
    <div class="container">
  <div class="sizeSmall"></div>
  <div class="grow">
    <div class="overflow"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Add overflow-x: scroll; to .container and use flex-shrink: 0; on the flex children.

    You can also accomplish this without flex-shrink using min-width on the flex children.

    html,
body {
  padding: 0px;
  margin: 0px;
}

.container {
  display: inline-flex;
  background: yellow;
  width: 100%;
  height: 100px;
  overflow-x: scroll;
}

.container div {
  border: 1px solid red;
}

.sizeSmall {
  width: 200px;
}

.overflow {
  width: 4000px;
}

.container>div {
  flex-shrink: 0;
}
    <div class="container">
  <div class="sizeSmall"></div>
  <div class="overflow"></div>
<div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search