css - 父容器自由伸缩的情况下，子容器三列等宽布局如何实现

Question

今天去面试的时候出现了这样一道题：
要求大容器在宽度自由伸缩的情况下，内部三个子元素宽度始终1:1:1，如何实现，请尽量写出俩种方法？

我给的答案：
方式一：
弹性盒子布局方式：（存在性兼容问题,ie系基本挂了，移动端4.3+）
父容器：dispaly:flex;
子容器分别设置：flex:1;
方式二：
不知道说什么了，就写了，在父容器定宽的情况下，可以使用百分比各占1/3的方式。

不知道weber有开发过这种情况的吗？

Answer 1

Responsive Web Design - Layout

Answer 2

Looking at responsive web design - after the layout, I suddenly had some ideas. I would like to add that I don’t know if this can meet the requirements of this question, and there is no way to get the correct answer from the interviewer.
When answering this question, I thought that the same problem would occur if the width was not set and if the height was not set (the parent container does not set the height, and the child container’s height set by percentage will not take effect). This is obviously wrong. A block-level element with no set width will occupy the full width of the parent container by default, so if you want to set the three columns to occupy 33% each, they can be of equal width:
1. Make the child elements arranged horizontally;
2. Make the child elements width Consistent;

Option 1: (inline block method)

display:inline-block;
width:33%;

Option 2: (floating method)

float:left/right;
width:30%;

Option 3: (Absolute positioning method)

position:absolute;
width:33%;
left:0/33%/66%;