john_galt Comments - Answer Overflow

I'm creating the breadcrumbs component. And the a tag as you might expect contains the link in the breadcrumbs. Between two links I have an icon. Container has the display of flex and align-items: center. Because of the fact, a is 18.5px and icon is 16px the icon is aligned incorrectly container -> link -> icon -> link

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

Are there any other solution to make sure, that a tag is the height of content inside of it, without setting the same line-height to it as the content inside of it?

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

Span is mandatory, because it's the component on it's own. And I want to use it. As I'm creating the component lib

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

I would have always one line of text

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

1. Could you plz send me a link to a resource, that explains the diffs between using the pixel values vs unitless 2. Are there any other solution to make sure, that a tag is the height of content inside of it, without setting the same line-height to it as the content inside of it?

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

as we saw, removing the line-height: 16px from "a" tag, causes it to be 18.5px tall

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

I want it to adjust it height, based on the height of it's content Is it possible to achieve that, without explicitly setting the line-height on "a" tag?

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

adding the display: inline-block to "a" tag still causes the "a" tag to be the height of 18.5px

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

got it what can I do, to make a tag the height of the child it contains?

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

not 18.5

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

it's equal 19.2

55 replies

KPCKevin Powell - Community

•Created by john_galt on 12/19/2024 in #front-end

Why parent inline element have grater height, than the content it contains?

Do you guys have any explanation, how the browser calculated the height of 18.5px? And how can I force it to be 16px? (without setting the actual height, and changing display to be block-lelvel element)? I want the "a" tag to adjust it height based on the height of the content inside of it

55 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

@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