Limit width of flexbox container to viewport width no matter how large the width of flex items are

I have a pen here where i have a flexbox container with two children: left and right. I want to keep the container width constrained by viewport width no matter the screen size so that the right div which has exceedingly high width be scrollable as part of the constraint. How do I achieve this?

https://codepen.io/marshall-lee/pen/OJboGjm

.container {
  display: flex;
  width: 100vw;
}

.right {
  background-color: green;
  width: 3000px;
  overflow-x: auto;
}
<div class="container">
  <div>left</div>
  <div>
    <div class="right">right</div>
  </div>
</div>

Answer

follow the below code :-

.container {
  display: flex;
  width: 100vw;
}

.left-container{
  background-color:red;
  flex:1;
}

.right-container{
  flex:11;
  overflow-x:auto;
}

.right {
  background-color: green;
  width: 3000px;
  overflow-x: auto;
}
<div class="container">
  <div class="left-container">left</div>
  <div class="right-container"><div class="right">right</div></div>
</div>

it will work as you expected.

Leave a Reply

Your email address will not be published. Required fields are marked *