all i have flex-cntaienr with two items. But even though I use flex: 1 for them and besides the fact box-sizing is set to border-box, they do have the same width. This is caused by the second element having padding of 5px per side (first one doesn't).How could this be fixed (of course without using fixed widths)? Example code:
* { box-sizing: border-box;}#container { display: flex; div { border: 1px solid red; flex: 1;&:last-child { padding: 5px; } }}<div id="container"><div>Content</div><div>Content</div></div>The box-sizing should handle this even in flex-containers, but it doesn't and the second container remains 10px (the padding left and right) larger than the first one. (ChatGPT says this shouldn't be the case). In this thread setting flex-basis to 50% should solve the problem, but I think this is not the best way: first: it is not requiered to set flex-basis if both containers have no padding/border. so it should be necessary to modify it for this case.second: those containers should be behavoe differently on mobile devices, so additional styles to reset flex-basis must be set.thirs: the html-part could be dynamic, which means even three different boxes could appear. I mean, this is the entire idea of flexbox box, to make these parts more flexible without changing the CSS all the time. Any good solutions?