john_galt Comments - Answer Overflow

john_galt

•Created by john_galt on 7/8/2023 in #front-end

Why second and third flex items doesn't take the remaining height space of container

@emmanuelyolou thank you for proposing a solution! Just one wrapper, and direction column is what I needed 🤩 Don't get me wrong I'm grateful to you for your time, but if you allow me, I would correct your proposed solution a bit(after reading the spec for 4 hours got an insight) :

.items-wrapper {
  display: flex;
  /* height: 100%; */
  /*Height is not necessary here, because flex-direction: column will change the main-axis to be from top to bottom in left to right writing mode, and flex factor is working on main axis, so it will stretch it vertically*/
  flex: 1;
}

.half-width-item {
  flex: 1;
  /* height: 100%; */
  /*Height is not necessary here also, because the inner flex container will have default direction defined as row and align-items: stretch will be applied in cross-axes which is top to bottom in this case in left to right writing mode*/
}

.container {
  border: 5px solid black;
  height: inherit;
  display: flex;
  flex-direction: column;
}

.items-wrapper {
  display: flex;
  /* height: 100%; */
  /*Height is not necessary here, because flex-direction: column will change the main-axis to be from top to bottom in left to right writing mode, and flex factor is working on main axis, so it will stretch it vertically*/
  flex: 1;
}

.half-width-item {
  flex: 1;
  /* height: 100%; */
  /*Height is not necessary here also, because the inner flex container will have default direction defined as row and align-items: stretch will be applied in cross-axes which is top to bottom in this case in left to right writing mode*/
}

.container {
  border: 5px solid black;
  height: inherit;
  display: flex;
  flex-direction: column;
}

8 replies

KPCKevin Powell - Community

•Created by john_galt on 7/8/2023 in #front-end

Why second and third flex items doesn't take the remaining height space of container

@Chris Got the answer, why it is the way it is. 4 hours reading the spec, and finally got it 😄 The spec says align-content: stretch -- .... the free-space is split equally between all of the lines, increasing their cross size. And the cross size is

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property

8 replies

KPCKevin Powell - Community

•Created by john_galt on 4/26/2023 in #front-end

Why div around flex-container breaks overflow scrolling?

Thanks, Kevin for the great explanation!

4 replies

Gaming

Programming