Flexbox child element overflow-y doesn't work

Question

I want myDiv1 and myDiv2 to be appear always 50% on the page. While user on desktop I want myDivs side by side 50%, and when on mobile phone I one after the other. So I addded max-width: 800px which converts flex-direction to column but when it turns to column myDiv2 items exceed container and breaks the page. I added overflow-y but it didn't work. I want myDiv1 and myDiv2 remain 50% on mobile screen as well and scroll items in list-container.

Example code here for better understanding. codepen link

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: tomato;
}

@media (max-width: 800px) {
  .container {
    flex-direction: column;
  }
}

.myDiv1 {
  border: 3px dashed blue;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

.myDiv2 {
  border: 3px dashed red;
  
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}

.list-container {
  height: 100%;
  overflow-y: scroll;
}

.list-item {
  padding: 20px;
  background: grey;
  margin-bottom: 10px;
}

<div class="container">
  
  <div class="myDiv1">
    <p>Some content</p>
    <button>myButton</button>
  </div>
  
    <div class="myDiv2">
      <div class="list-container">
        
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>
        <div class="list-item">Lorem ipsum dolor sit amet.</div>

      </div>
    </div>
  
</div>

The CSS overflow property controls what happens to content that is too big to fit into an area. that is not the case here since `.list-container` == height of all `.list-item` but if you set a fixed height to container let's say `.list-container{height:200px}` the height of children is bigger than the height of the fixed parent height => overflow — AbdelghanyMh, Oct 10 '22 at 22:23

Flexbox child element overflow-y doesn't work

0 Answers0