Specifying flexbox cross size grow values

Question

Is there any mechanism for specifying flex-* style properties for layout on the cross axis of a flexbox?

I have a layout consisting of two horizontally aligned boxes with minimum widths in a flex box of variable width. When the container gets too small to hold the two boxes, the right box wraps around to the bottom of the container. The left box stays a certain size until the wrap occurs, at which point it grows to fill the width of the container. I've achieved this with the following CSS:

#container {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

#left {
    flex: 1 0 200px;
}

#right {
    flex: 1000 0 200px;
}

By setting a basis of 200px and a shrink of 0, this gives the left box a minimum width of 200px, and by setting a small grow value versus the massive one in the right box, the right box will fill the remaining space and the left one will basically not change in size. I arrange the numbers this way because when the container is smaller than 400px the right box wraps around to the bottom half of the container, at which point the grow value of the left box is uncontested and it grows to the full size of the container.

The issue I have is with the resulting sizes on the cross axis. If the right box fills up with contents, it begins to overflow the container, when I need it to start scrolling instead. The best I seem to be able to do here is set an overflow-y on the container, which scrolls the whole container, including the left box. Setting a max-height of 100% is still relative to the whole height of the container, and setting any other height value affects the height of the box when it is not wrapped, where I need to it to also stretch to the full length.

You can see the effect at this fiddle. When the container is less than 400px, the blue box wraps around. The blue box has a minimum height of 200px, so it satisfies that and then the two boxes stretch to fill the remaining vertical height. But when you click enough, the blue box begins to overflow, and cannot be contained by an overflow-y because there's no definitive height value on it.

Essentially what I want is the same values in the flex settings, but for the cross axis:

#left {
    cross: 1000 0 auto;
}

#right {
    cross: 1 0 200px;
}

This way they both stretch to fill the vertical space when there's no wrap, but when the wrap occurs the right box gets a height of 200px and the the left box fills the remaining vertical space. Is there any way to achieve this effect, given that the above property does not exist?

Answer 1

Here is an example where the box scrolls its content but still retains the height of the parent. I think what is giving you problems is you dont have a height specified on the parent element. if you want the blue box to retain a certain height, its parent will also need a height value specified.

* {
  box-sizing: border-box;
}

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}

.cont {
  display: flex;
  height: 100%;
}

.col-1 {
  flex-basis: 50%;
  background: slategray;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
}

.col-2 {
  max-height: 100%;
  background: gray;
  color: #fff;
  flex-basis: 50%;
  overflow: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.col-2::-webkit-scrollbar {
  display: none;
}

.scroll-cont {
  padding: 30px;
}

<div class="cont">
  <div class="col-1">
    heel, boy
  </div>
  <div class="col-2">
    <div class="scroll-cont">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus facilisis dui id faucibus. Pellentesque euismod vehicula sapien vel convallis. Fusce in magna non risus malesuada porttitor sed ut urna. Integer egestas viverra nulla eget mattis.
        Maecenas</p>
    </div>
  </div>
</div>